/************
 * GtkScale *
 ************/
%scale_trough {
  border:none;
  background-color: $base_color;
  box-shadow: 0px 1px $bottom_highlight;
  border:1px solid $borders_color;

  padding:0;
  margin: 0;

  &:disabled {
    background-color: $insensitive_bg_color;
    box-shadow: none;
  }

  &:backdrop {
    background-color: $backdrop_base_color;
    transition: $backdrop_transition;

    &:disabled { background-color: $insensitive_bg_color; }
  }

  // ...on selected list rows
  row:selected & {
    box-shadow: none;

    &, &:disabled { border-color: $selected_borders_color; }
  }

  // OSD
  .osd & {
    border-color: $osd_borders_color;
    background-color: transparentize($osd_borders_color, 0.2);
    box-shadow: none;
    outline-color: transparentize($osd_fg_color, 0.8);

    &:disabled { background-color: $osd_insensitive_bg_color; }
  }
}

%scale_highlight {

  border: 1px solid $selected_borders_color;
  background-color: $selected_bg_color;
  box-shadow: inset 0px 1px $top_highlight;
  
  border-radius: 4px;

  &:disabled {
    border: 1px solid $borders_color;
    background-color: transparentize(black, 0.9);
  }

  &:backdrop,
  &:active:backdrop {

    border-color: lighten($selected_bg_color, 10%);
    background-color: lighten($selected_bg_color, 10%);
    &:disabled {
      background-color: transparent;
      border-color: transparent;
    }
  }

  // ...on selected list rows
  row:selected & { &:disabled, & { border-color: $selected_borders_color; } }

  // OSD
  .osd & {
    border-color: $osd_borders_color;

    &:disabled { border-color: transparent; }
  }
}

scale {
  // sizing

  $_marks_lenght: 6px;
  $_marks_distance: 6px;

  min-height: 10px;
  min-width: 10px;
  padding: 8px;

  // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
  fill,
  highlight { margin: -1px; }

  // the slider is inside the trough, so to have make it bigger there's a negative margin
  slider {
    min-height: 18px;
    min-width: 18px;
    margin: -9px 0;

    &.horizontal {
      margin: 0 -9px;
    }

    background-color:$base_color;
    box-shadow:0 1px 2px 0 transparentize(black, 0.7);
    border: 1px solid $borders_color;
    border-radius: 12px;

    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:hover {}
    &:active {
      box-shadow:0 1px 2px 0 transparentize($selected_bg_color, 0.5);
      border: 1px solid $selected_bg_color;

      &:disabled {
        box-shadow:none;
        border: 1px solid transparentize(black, 0.8);
      }
    }
  }

  // click-and-hold the slider to activate
  &.fine-tune {
    &.horizontal {
      padding-top: 9px;
      padding-bottom: 9px;
      min-height: 16px;
    }

    &.vertical {
      padding-left: 9px;
      padding-right: 9px;
      min-width: 16px;
    }

    // to make the trough grow in fine-tune mode
    slider { margin: -6px; }

    fill,
    highlight,
    trough {
      border-radius: 5px;
      -gtk-outline-radius: 7px;
    }
  }

  // the backing bit
  trough {
    @extend %scale_trough;

    outline-offset: 2px;
    -gtk-outline-radius: 5px;
  }

  // the colored part of the backing bit
  highlight { @extend %scale_highlight; }

  // this is another differently styled part of the backing bit, the most relevant use case is for example
  // in media player to indicate how much video stream as been cached
  fill {
    @extend %scale_trough;

    &, &:backdrop {
      background-color: $borders_color;
      box-shadow: none;
    }

    &:disabled {
      &, &:backdrop {
        border-color: transparent;
        background-color: transparent;
      }
    }

    // OSD
    .osd & {
      background-color: mix($osd_fg_color, $osd_borders_color, 25%);

      &:disabled {
        &, &:backdrop {
          border-color: transparent;
          background-color: transparent;
        }
      }
    }
  }

  slider {
    @include button(normal-alt, $edge: $shadow_color);

    border: 1px solid darken($borders_color, 3%);
    border-radius: 100%;
    transition: $button_transition;
    transition-property: background, border, box-shadow;

    &:hover { @include button(hover-alt, $edge: $shadow_color); }

    &:active { border-color: $selected_borders_color; }

    &:disabled { @include button (insensitive); }

    &:backdrop {
      transition: $backdrop_transition;

      @include button(backdrop);

      &:disabled { @include button(backdrop-insensitive); }
    }

    // ...on selected list rows
    row:selected & { &, &:disabled { border-color: $selected_borders_color; } }

    // OSD
    .osd & {
      @include button(osd);
      border-color: darken($osd_borders_color, 3%);
      background-color: opacify($osd_bg_color, 1); // solid background needed here

      &:hover { @include button(osd-hover); }

      &:active { @include button(osd-active); }

      &:disabled { @include button(osd-insensitive); }

      &:backdrop {
        @include button(osd-backdrop);

        &:disabled { @include button(osd-backdrop-insensitive); }
      }
    }
  }

  value { color: gtkalpha(currentColor, 0.4); }

  marks {
    color: gtkalpha(currentColor, 0.4);

    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                                                     (bottom, bottom, top),
                                                     (top, left, right),
                                                     (bottom, right, left) {
      &.#{$marks_class} {
        margin-#{$marks_margin}: $_marks_distance;
        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
      }
    }
  }

  &.fine-tune marks {
    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
                                                     (bottom, bottom, top),
                                                     (top, left, right),
                                                     (bottom, right, left) {
      &.#{$marks_class} {
        margin-#{$marks_margin}: $_marks_distance;
        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
      }
    }
  }
  &.horizontal {
    indicator {
      min-height: $_marks_lenght;
      min-width: 1px;
    }

    &.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
  }
  &.vertical {
    indicator {
      min-height: 1px;
      min-width: $_marks_lenght;
    }

    &.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
  }
  // *WARNING* scale with marks madness following

  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
  $suffix: if($variant == 'light', '', '-dark');

  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
                                  ('vertical', 'vert') {
    @each $marks_infix, $nth_child in ('scale-has-marks-above', ':last-child:not(:only-child)'),
                                      ('scale-has-marks-below', ':first-child:not(:only-child)') {
      @each $state, $state_infix in ('', ''),
                               (':hover', '-hover'),
                               (':active', '-active'),
                               (':disabled', '-insensitive'),
                               (':backdrop', '-backdrop'),
                               (':backdrop:disabled', '-backdrop-insensitive') {
        &.#{$dir_class} {
          %#{$marks_infix}-#{$dir_infix},
          contents#{$nth_child} > trough > slider {
            &#{$state} {
              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
              // margin is set on the point side.
              margin: -10px;
              $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
              border-style: none;
              border-radius: 0;

              background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));

              $_scale_slider_bg_pos: bottom;
              @if $dir_class == 'horizontal' {
                min-height: 26px;
                min-width: 22px;

                @if $marks_infix == 'scale-has-marks-above' {
                  margin-top: -14px;

                  $_scale_slider_bg_pos: top;
                }

                @else { margin-bottom: -14px; }
              }

              @else {
                min-height: 22px;
                min-width: 26px;

                @if $marks_infix == 'scale-has-marks-above' {
                  margin-left: -14px;

                  $_scale_slider_bg_pos: left bottom;
                }

                @else {
                  margin-right: -14px;

                  $_scale_slider_bg_pos: right bottom;
                }
              }

              background-position: $_scale_slider_bg_pos;
              background-repeat: no-repeat;
              box-shadow: none;
            }
          }

          @at-root %#{$marks_infix}-#{$dir_infix}-fine-tune,
          &.fine-tune contents#{$nth_child} > trough > slider {
            // bigger negative margins to make the trough grow here as well
            margin: -7px;

            @if $dir_class == 'horizontal' {
              @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }

              @else { margin-bottom: -11px; }
            }

            @else {
              @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }

              @else { margin-right: -11px; }
            }
          }
        }
      }
    }
  }

  &.color {
    min-height: 0;
    min-width: 0;

    trough {
      background-image: linear-gradient(to top, $borders_color);
      background-repeat: no-repeat;
    }

    &.horizontal {
      padding: 0 0 15px 0;

      trough {
        padding-bottom: 4px;
        background-position: 0 -3px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      slider {
        &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
          @extend %scale-has-marks-above-horz;

          margin-bottom: -15px;
          margin-top: 6px;
        }
      }
    }

    &.vertical {
      &:dir(ltr) {
        padding: 0 0 0 15px;

        trough {
          padding-left: 4px;
          background-position: 3px 0;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            @extend %scale-has-marks-below-vert;

            margin-left: -15px;
            margin-right: 6px;
          }
        }
      }

      &:dir(rtl) {
        padding: 0 15px 0 0;

        trough {
          padding-right: 4px;
          background-position: -3px 0;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
        }

        slider {
          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
            @extend %scale-has-marks-above-vert;

            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }

    &.fine-tune {
      &.horizontal {
        padding: 0 0 12px 0;

        trough {
          padding-bottom: 7px;
          background-position: 0 -6px;
        }

        slider {
          @extend %scale-has-marks-above-horz-fine-tune;

          margin-bottom: -15px;
          margin-top: 6px;
        }
      }

      &.vertical {
        &:dir(ltr) {
          padding: 0 0 0 12px;

          trough {
            padding-left: 7px;
            background-position: 6px 0;
          }

          slider {
            @extend %scale-has-marks-below-vert-fine-tune;

            margin-left: -15px;
            margin-right: 6px;
          }
        }

        &:dir(rtl) {
          padding: 0 12px 0 0;

          trough {
            padding-right: 7px;
            background-position: -6px 0;
          }

          slider {
            @extend %scale-has-marks-above-vert-fine-tune;

            margin-right: -15px;
            margin-left: 6px;
          }
        }
      }
    }
  }
}