@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-time-picker {
  width: 200px;

  .time-input-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .clear-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
  }
}

.#{$devui-prefix}-time-picker--fade {
  &-bottom {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(-4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }

  &-top {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }
}