@import "../../styles/colors.scss";

:host {
  filter: grayscale(80%)
}

:host.enabled {
  filter: none;
}

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

@mixin size ($size) {
  width: $size;
  height: $size;
}

@mixin circle () {
  border-radius: 50%;
}

.container {

  display: inline-block;
  .knob {
    position: relative;
  }

  .large {
    @mixin shadow ($size: 0.5px, $blur: 5px) {
      box-shadow: 0 1px $blur $size #000,
              0 -1px $blur $size #FFF9;
    }
    @include size(90px);

    .scale {
      @include size(80px);
      @include center();
      fill: $accent;
      top: 43%;
    }

    .slot {
      @include center();
      @include size(70px);
      @include circle();
      box-shadow: 0 5px 5px #000A;
      background-color: #46494E;
      border: 2px solid black;
    }

    .body {
      @include center();
      @include size(64px);
      @include shadow();
      @include circle();

      box-shadow: 
      0 -.5px 0px 0px #FFF3, // solid line top
      0 -1px 5px 0.5px #FFF4, // diffused shadow top
      0 .5px .5px 0.5px #000, // solid line bottom
      0 1px 5px 0.5px #000; // diffused shadow bottom
      ;
      background-color: #46494E;
    }

    .cap {
      @include center();
      @include size(58px);

      .cap-body {
        @include center();
        @include size(58px);
        @include circle();
        // @include shadow(2px, 0px);
        filter: drop-shadow(0 -1px 0px #FFF3)
      drop-shadow(0 2px 5px black);

        background-image: linear-gradient(to bottom, #51555A, #3C4045);
        // clip-path: url('#large-knob-cap-clip-path');
      }

      .indicator {
        @include center();
        @include size(40px);
        .inner-line {
          @include center();
          @include size(40px);
          fill: darken(#2F3336, 5%);
        }
  
        .pointer {
          @include size(5px);
          @include circle();
          position: absolute;
          top: -4%;
          left: 50%;
          transform: translate(-50%, 0);
          -webkit-transform: translate(-50%, 0);
          background-color: $accent;
        }
      }
      
    }
  }

  .medium {
    @include size(70px);

    .scale {
      @include size(62px);
      @include center();
      fill: $accent;
      // top: 41.5%;
    }

    .slot {
      @include center();
      @include size(48px);
      @include circle();
      background-color: #3F4346;
      box-shadow: 0 3px 5px 2px #0009;

    }

    .body {
      @include center();
      @include size(38px);
      @include circle();

      box-shadow: 0 0 2px 0.5px #FFF2;

      background-color: #3D4244;
    }

    .cap {
      @include center();
      @include size(38px);
      fill: $accent;
    }

  }

  .small {
    @include size(50px);

    .scale {
      @include size(40px);
      @include center();
      fill: $accent;
      // top: 41.5%;
    }

    .slot {
      @include center();
      @include size(34px);
      @include circle();
      background-color: #3F4346;
      box-shadow: 0 2px 5px 2px #0009;

    }

    .body {
      @include center();
      @include size(27px);
      @include circle();

      box-shadow: 0 0 2px 0.5px #FFF2;

      background-color: #3D4244;
    }

    .cap {
      @include center();
      @include size(24px);
      fill: $accent;
    }

  }
}
