/**********************
 * Workspaces to Dock *
 **********************/

// global settings
#workspacestodock {
  &TriggerSpacer,
  &ContainerWrapper,
  &Container { background-color: rgba(19, 25, 28, 0.0); }
}

// dock styling
#workspacestodockDock {
  padding: 0;

  @each $_dock, $_border, $_roundness in (top, "0 -1px 0", "2px 2px 0 0"),
                                         (bottom, "0 1px 0", "0 0 2px 2px"),
                                         (left, "-1px 0 0", "0 2px 2px 0"),
                                         (right, "1px 0 0", "2px 0 0 2px") {

    &.#{$_dock} {
      .workspace-thumbnails {
        border-radius: #{$_roundness};
        background-color: rgba(19, 25, 28, 0.0);
        box-shadow: none;
      }
    }

    &.#{$_dock}.inside {
      .workspace-thumbnails {
        border-radius: 0;
        background-color: rgba(19, 25, 28, 0.0);
        box-shadow: none;
      }

      .workspacestodock-shortcuts-panel {
        padding: 2px;
        spacing: 0;
        border-radius: 0;
        background-color: rgba(19, 25, 28, 0.0);
        box-shadow: none;
      }
    }

    &.#{$_dock}.fullheight {
      .workspace-thumbnails,
      .workspacestodock-shortcuts-panel { border-radius: 0; }
    }

    &.#{$_dock} .workspacestodock-shortcuts-panel {
      padding: 2px;
      spacing: 0;
      border-radius: 0;
      box-shadow: inset #{$_border} $osd_semi_fill_color;
    }
  }
}

.workspacestodock-shortcuts-panel {
  &-popupmenu {
    padding: 2px;
    spacing: 0;
  }

  &-favorites {
  }

  &-running {
  }

  &-places {
  }
}

// shortcuts panel button styling
#workspacestodockDock {
  .app-well-app { // set circle dock buttons on shortcuts panel
    .overview-icon { border-radius: 100px; }
    &:hover .overview-icon {
      background-color: $osd_semi_fill_color;
    }
    &:active .overview-icon,
    &:focus .overview-icon,
    &:checked .overview-icon { background-color: $osd_indicator_color; }
  }

  .workspacestodock-shortcuts-panel > StButton { background-size: contain; }
}

.workspacestodock-shortcut-button {
  &-symbolic {
  }

  &-icon { padding: 6px; }

  &-symbolic-icon { padding: 8px; }
}

// shortcuts panel item styling
#workspacestodockDock .popup-separator-menu-item {
  margin: 2px;
}
.workspacestodock-shortcut-panel {
  &-separator { -margin-horizontal: 2px; }

  &-filler {
    height: 1px;
    padding: 0;
    -margin-horizontal: 2px;
    -gradient-height: 1px;
    -gradient-start: transparent;
    -gradient-end: transparent;
  }
}

// shortcuts panel button window count indicators styling
#workspacestodockDock {
  @each $_dock, $_indicator in (top, top),
                               (bottom, bottom),
                               (left, left),
                               (right, right) {
    &.#{$_dock} {
      .workspacestodock-shortcut-button-windowcount-image-1 {
        background-image: url('assets/one-#{$_indicator}.svg');
      }

      .workspacestodock-shortcut-button-windowcount-image-2 {
        background-image: url('assets/two-#{$_indicator}.svg');
      }

      .workspacestodock-shortcut-button-windowcount-image-3 {
        background-image: url('assets/three-#{$_indicator}.svg');
      }

      .workspacestodock-shortcut-button-windowcount-image-4 {
        background-image: url('assets/four-#{$_indicator}.svg');
      }
    }
  }
}

// workspace caption styling
.workspacestodock-workspace-caption {
  color: $osd_dim_fg_color;

  &-container {
    padding: 0;
    border-radius: 2px;
    border: 1px solid $borders_color;
  }

  &-background {
    border-top: 1px solid $borders_color;
    border-radius: 0 0 2px 2px;
    background-color: $osd_bg_color;

    &-current { color: $osd_fg_color; }
  }
}

// taskbar caption styling
.workspacestodock-caption-windowapps {
  padding: 0;

  &-menu {
    -boxpointer-gap: 12px;

    .window-close {
      // shell version 3.6 or higher can override
      // gnome shell class 'window-close'
      height: 20px;
      width: 20px;
      background-size: 24px;
    }
  }

  &-menu-item {
    // fallback class for shell version 3.4 since it can't override
    // gnome shell class 'popup-menu-item'
    &:active {
    }
  }

  &-menu-icon {
  }

  &-menu-label { padding: 0 10px 0 10px; }

  &-button {
    padding: 0 4px;

    &-icon {
      padding: 2px 2px 0 2px;
      border: none;
      border-radius: 0;
      background-color: transparent;
      box-shadow: none;
    }

    &:hover > &-icon {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0 -2px 0 $osd_fill_color;
    }
    &-active > &-icon,
    &-active:hover > &-icon {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0 -2px 0 $osd_indicator_color;
    }
  }
}

.workspacestodock-caption {
  &-number {
    height: 20px;
    min-width: 7px;
    padding: 0 7px;
    border-radius: 100px;
    color: $osd_dim_fg_color;
    background-color: $osd_bg_color;
    font-size: 12px; // 90% scaling
    font-weight: 700;
    text-align: center;
    box-shadow: $z-depth-1;

    &-current {
      color: $accent_color;
      box-shadow: $z-depth-2;
    }
  }

  &-name {
    height: 20px;
    min-width: 7px;
    padding: 0 7px;
    border-radius: 2px;
    color: $osd_dim_fg_color;
    background-color: $osd_bg_color;
    font-size: 12px; // 90% scaling
    font-weight: 700;
    text-align: center;
    box-shadow: $z-depth-1;

    &-current {
      color: $accent_color;
      box-shadow: $z-depth-2;
    }
  }

  &-windowcount {
    min-width: 7px;
    padding: 0 7px;
    border: none;
    color: $osd_dim_fg_color;
    background-color: transparent;
    font-size: 12px; // 90% scaling
    font-weight: 700;
    text-align: center;

    &-current { color: $osd_fg_color; }

    &-image {
      width: 20px;
      height: 16px;
    }
  }

  // caption spacer-filler
  &-spacer {
    width: 1px;
    border: 1px solid transparent;
  }
}

// The classes below are used in conjunction
// with the above 'workspacestodock-caption-windowcount-image'
// They provide background images that corespond
// with the window count
.workspacestodock-caption-windowcount {
  @each $_num, $_name in (1, one),
                         (2, two),
                         (3, three),
                         (4, four) {
    &-image-#{$_num} {
      background-image: url('assets/h-#{$_name}.svg');
    }
  }
}

