@time-picker-border-radius: 4px;
@time-picker-font-size: var(--font-size-md);
@time-picker-min-width: 290px;
@time-picker-height: 385px;
@time-picker-title-padding: 16px;
@time-picker-title-color: #fff;
@time-picker-title-background: var(--color-primary);
@time-picker-title-time-font-size: 50px;
@time-picker-title-time-margin: 0 5px;
@time-picker-title-ampm-margin-left: 5px;
@time-picker-clock-left: 27px;
@time-picker-clock-right: 27px;
@time-picker-clock-top: 27px;
@time-picker-clock-bottom: 27px;
@time-picker-clock-container-width: 270px;
@time-picker-clock-container-height: 270px;
@time-picker-clock-container-background: #e0e0e0;
@time-picker-clock-hand-height: calc(50% - 4px);
@time-picker-clock-hand-width: 2px;
@time-picker-clock-hand-bottom: 50%;
@time-picker-clock-hand-left: calc(50% - 1px);
@time-picker-clock-hand-background: var(--color-primary);
@time-picker-clock-hand-border-color: var(--color-primary);
@time-picker-clock-hand-before-width: 10px;
@time-picker-clock-hand-before-height: 10px;
@time-picker-clock-hand-before-border-width: 2px;
@time-picker-clock-hand-after-width: 4px;
@time-picker-clock-hand-after-height: 4px;
@time-picker-clock-item-height: 32px;
@time-picker-clock-item-width: 32px;
@time-picker-clock-item-active-background: var(--color-primary);
@time-picker-clock-item-active-color: #fff;
@time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
@time-picker-body-background: #fff;
@time-picker-inner-left: 36px;
@time-picker-inner-right: 36px;
@time-picker-inner-top: 36px;
@time-picker-inner-bottom: 36px;

:root {
  --time-picker-border-radius: @time-picker-border-radius;
  --time-picker-font-size: @time-picker-font-size;
  --time-picker-min-width: @time-picker-min-width;
  --time-picker-height: @time-picker-height;
  --time-picker-title-padding: @time-picker-title-padding;
  --time-picker-title-color: @time-picker-title-color;
  --time-picker-title-background: @time-picker-title-background;
  --time-picker-title-time-font-size: @time-picker-title-time-font-size;
  --time-picker-title-time-margin: @time-picker-title-time-margin;
  --time-picker-title-ampm-margin-left: @time-picker-title-ampm-margin-left;
  --time-picker-clock-left: @time-picker-clock-left;
  --time-picker-clock-right: @time-picker-clock-right;
  --time-picker-clock-top: @time-picker-clock-top;
  --time-picker-clock-bottom: @time-picker-clock-bottom;
  --time-picker-clock-container-width: @time-picker-clock-container-width;
  --time-picker-clock-container-height: @time-picker-clock-container-height;
  --time-picker-clock-container-background: @time-picker-clock-container-background;
  --time-picker-clock-hand-height: @time-picker-clock-hand-height;
  --time-picker-clock-hand-width: @time-picker-clock-hand-width;
  --time-picker-clock-hand-bottom: @time-picker-clock-hand-bottom;
  --time-picker-clock-hand-left: @time-picker-clock-hand-left;
  --time-picker-clock-hand-background: @time-picker-clock-hand-background;
  --time-picker-clock-hand-border-color: @time-picker-clock-hand-border-color;
  --time-picker-clock-hand-before-width: @time-picker-clock-hand-before-width;
  --time-picker-clock-hand-before-height: @time-picker-clock-hand-before-height;
  --time-picker-clock-hand-before-border-width: @time-picker-clock-hand-before-border-width;
  --time-picker-clock-hand-after-width: @time-picker-clock-hand-after-width;
  --time-picker-clock-hand-after-height: @time-picker-clock-hand-after-height;
  --time-picker-clock-item-height: @time-picker-clock-item-height;
  --time-picker-clock-item-width: @time-picker-clock-item-width;
  --time-picker-clock-item-active-background: @time-picker-clock-item-active-background;
  --time-picker-clock-item-active-color: @time-picker-clock-item-active-color;
  --time-picker-clock-item-disable-color: @time-picker-clock-item-disable-color;
  --time-picker-inner-left: @time-picker-inner-left;
  --time-picker-inner-right: @time-picker-inner-right;
  --time-picker-inner-top: @time-picker-inner-top;
  --time-picker-inner-bottom: @time-picker-inner-bottom;
  --time-picker-body-background: @time-picker-body-background;
}

// Mixins
.after-before-basic {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.var-time-picker {
  border-radius: var(--time-picker-border-radius);
  contain: layout style;
  display: flex;
  flex-direction: column;
  font-size: var(--time-picker-font-size);
  position: relative;
  min-width: var(--time-picker-min-width);
  height: var(--time-picker-height);
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &-title {
    padding: var(--time-picker-title-padding);
    color: var(--time-picker-title-color);
    background: var(--time-picker-title-background);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    &__btn {
      opacity: 0.6;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transition: 0.3s var(--cubic-bezier);
      white-space: nowrap;

      &--active {
        opacity: 1;
      }
    }

    &__time {
      display: flex;
      justify-content: flex-end;
      font-size: var(--time-picker-title-time-font-size);

      .var-time-picker-title__btn {
        align-items: center;
        margin: var(--time-picker-title-time-margin);
      }
    }

    &__ampm {
      margin-left: var(--time-picker-title-ampm-margin-left);
    }
  }

  &-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--time-picker-body-background);
  }

  &-clock {
    position: absolute;
    bottom: var(--time-picker-clock-bottom);
    left: var(--time-picker-clock-left);
    right: var(--time-picker-clock-right);
    top: var(--time-picker-clock-top);

    &__container {
      width: var(--time-picker-clock-container-width);
      height: var(--time-picker-clock-container-height);
      background: var(--time-picker-clock-container-background);
      border-radius: 50%;
      position: relative;
    }

    &__hand {
      height: var(--time-picker-clock-hand-height);
      width: var(--time-picker-clock-hand-width);
      bottom: var(--time-picker-clock-hand-bottom);
      left: var(--time-picker-clock-hand-left);
      transform-origin: center bottom;
      position: absolute;
      will-change: transform;
      z-index: 1;
      background-color: var(--time-picker-clock-hand-background);
      border-color: var(--time-picker-clock-hand-border-color);

      &::before {
        .after-before-basic();

        background: transparent;
        border: var(--time-picker-clock-hand-before-border-width) solid;
        width: var(--time-picker-clock-hand-before-width);
        height: var(--time-picker-clock-hand-before-height);
        top: -5px;
        border-color: inherit;
      }

      &::after {
        .after-before-basic();

        border-color: inherit;
        height: var(--time-picker-clock-hand-after-height);
        width: var(--time-picker-clock-hand-after-width);
        top: 100%;
        border-style: solid;
        background-color: inherit;
      }
    }

    &__item {
      align-items: center;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      height: var(--time-picker-clock-item-height);
      position: absolute;
      width: var(--time-picker-clock-item-width);
      user-select: none;
      transform: translate(-50%, -50%);

      &--active {
        background: var(--time-picker-clock-item-active-background);
        z-index: 2;
        color: var(--time-picker-clock-item-active-color);
      }

      &--disable {
        color: var(--time-picker-clock-item-disable-color);
      }
    }

    &__inner {
      position: absolute;
      bottom: var(--time-picker-inner-bottom);
      left: var(--time-picker-inner-left);
      right: var(--time-picker-inner-right);
      top: var(--time-picker-inner-top);
    }
  }

  &-panel-fade-enter,
  &-panel-fade-leave-to {
    transition: 0.3s var(--cubic-bezier);
    opacity: 0;
  }

  &-panel-fade-leave-active {
    position: absolute;
  }
}