// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.GradientDial {
  &__container {
    height: 100%;
    @include mixins.position-absolute-center;
    width: 100%;
  }

  &__bar {
    &--container {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    &--node {
      background: variables.$color-white;
      border: 1px solid variables.$color-black-alpha-20;
      height: 100%;
      height: 1000px;
      inset-inline-start: 50%;
      position: absolute;
      top: 50%;
      transform-origin: center;
      width: 4px;
    }
  }

  &__knob {
    @include mixins.color-bubble(42px);
    & {
      box-shadow: 0 0 4px variables.$color-black-alpha-20;
      cursor: move;
      margin-inline-start: -20px;
      margin-top: -20px;
      padding: 2px;
      position: absolute;
      z-index: variables.$z-index-base;
    }

    &--selected {
      border-color: variables.$color-gray-75;

      @include mixins.dark-theme {
        border-color: variables.$color-white;
      }
    }

    &:focus {
      outline: none;
    }

    @include mixins.keyboard-mode {
      &:focus {
        border-color: variables.$color-ultramarine;
        outline: none;
      }
    }
  }
}