@use 'src/styles/abstracts' as *;

.AudioBox {
  max-width: toRem(268px);
  &__controllers {
    position: relative;
    display: flex;
    align-items: center;
    padding: $space-xs;
    background-color: $pico-5;
    border-radius: $border-radius-main;
    width: toRem(268px);
    height: toRem(40px);
    &__download {
      min-width: 1.5rem;
    }
    &__player {
      min-width: 1.5rem;
      height: 1.5rem;
      border-radius: $radius-main;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.18s ease-out;
      &:hover {
        background-color: rgba(28, 40, 82, 0.04);
      }
      .Icon__container {
        position: absolute;
        z-index: 0;
        font-size: $text-sm;
      }
      .MuiPaper-root {
        height: 1.5rem;
        width: 1.5rem;
        display: flex;
        align-items: center;
        justify-self: center;
        background-color: transparent;
        box-shadow: unset;
        .MuiGrid-root {
          padding: 0;
          display: flex;
          svg {
            font-size: $text-xxl;
            color: transparent;
            z-index: 1;
            position: relative;
            &:hover {
              color: transparent;
            }
          }
        }
      }
    }
    &__timer {
      display: flex;
      span {
        width: 2rem;
        text-align: right;
        @include monospaceFontFamily();
        &:last-child {
          text-align: left;
        }
      }
      &-long {
        min-width: toRem(74px);
        span {
          min-width: 2.5rem;
          text-align: right;
          display: inline-block;
          &:last-child {
            text-align: left;
          }
        }
      }
    }
    .Slider {
      &:hover {
        .MuiSlider-thumb {
          opacity: 1;
          visibility: visible;
        }
        .Mui-disabled {
          .MuiSlider-thumb {
            opacity: 0;
            visibility: hidden;
          }
        }
      }

      .MuiSlider {
        &-root {
          height: 0.375rem;
          display: flex;
          align-items: center;
        }
        &-rail,
        &-track {
          height: 0.125rem;
        }

        &-thumb {
          width: 0.5rem;
          height: 0.5rem;
          box-shadow: unset;
          background-color: $primary-color;
          margin-top: 0;
          transition: opacity 0.18s ease-out;
          opacity: 0;
          visibility: hidden;
          &:hover {
            box-shadow: unset;
          }
          &::after {
            // display: none;
            width: toRem(18px);
            height: toRem(22px);
            top: toRem(-6px);
            left: toRem(-5px);
          }
        }
      }
    }

    &__progressSlider {
      margin: 0 $space-xxxs 0 $space-xxs;
      height: toRem(40px);
      .MuiSlider-root {
        height: 100% !important;
      }
    }
    &__volume {
      margin: 0 $space-xxs 0 $space-xs;
      position: relative;
      button {
        justify-content: flex-start;
      }
      &:hover {
        .AudioBox__controllers__volume__Slider {
          opacity: 1;
          visibility: visible;
        }
      }
      &__Slider {
        background-color: $pico-5;
        opacity: 0;
        visibility: hidden;
        transition: all 0.18s ease-out;
        bottom: -1rem;
        left: 0;
        position: absolute;
        width: toRem(56px);
        box-shadow: 0 0.125rem 0.25rem rgba(28, 40, 82, 0.15);
        border-radius: $border-radius-xss;
        height: 1rem;
        display: flex;
        justify-content: center;
        z-index: 2;
        .Slider {
          width: 2rem;
          .MuiSlider {
            &-root {
              height: 0.375rem;
              color: $pico-80;
            }
            &-rail,
            &-track {
              height: 0.125rem;
            }
            &-track {
              background-color: $pico-80;
            }
            &-thumb {
              height: toRem(6px);
              width: toRem(6px);
              background-color: $pico-80;
              border-color: $pico-80;
              margin-left: toRem(-4px);
              margin-top: 0;
              &:hover {
                box-shadow: unset;
              }
              &::after {
                width: toRem(16px);
                height: toRem(16px);
                top: toRem(-6px);
                left: toRem(-6px);
              }
            }
          }
        }
      }
    }
  }
  &__caption {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: $space-xxxxs;
    max-width: toRem(268px);
  }
}
