@import '../animation/variables.scss';

$name: 'ivue-date-picker-title';

:root {
  --#{$name}-year-margin-bottom: 8px;

  // date
  --#{$name}-date-font-size: 34px;
  --#{$name}-date-padding-bottom: 16px;

  // color
  --#{$name}-hover-color: rgba(255, 255, 255, 0.6);
}

.#{$name} {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
  line-height: 1;
  color: var(--ivue-white-color);

  &--btn {
    transition: $ivue-transition-default;
  }

  &--year {
    align-items: center;
    display: inline-flex;
    font-size: var(--ivue-font-base-size);
    font-weight: 500;
    margin-bottom: var(--#{$name}-year-margin-bottom);
    cursor: pointer;
    transition: $ivue-transition-default;

    &:hover:not(.ivue-picker-readonly) {
      color: var(--#{$name}-hover-color);
    }

    i {
      margin: initial;
      transition: none;
    }
  }

  &--date {
    font-size: var(--#{$name}-date-font-size);
    text-align: left;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--#{$name}-date-padding-bottom);
  }
}

.picker-transition-enter-active,
.picker-transition-leave-active,
.picker-reverse-transition-enter-active,
.picker-reverse-transition-leave-active {
  transition: $ivue-transition-default;
}

.picker-transition-enter-from,
.picker-transition-leave-to,
.picker-reverse-transition-enter-from,
.picker-reverse-transition-leave-to {
  opacity: 0;
}

.picker-transition-enter-to,
.picker-reverse-transition-enter-to {
  transform: translate(0, 0);
}

.picker-transition-leave,
.picker-transition-leave-active,
.picker-transition-leave-to,
.picker-reverse-transition-leave,
.picker-reverse-transition-leave-active,
.picker-reverse-transition-leave-to {
  position: absolute !important;
}

.picker-transition-enter-from {
  transform: translate(0, 100%);
}

.picker-transition-leave-to {
  transform: translate(0, -100%);
}

.picker-reverse-transition-enter-from {
  transform: translate(0, -100%);
}

.picker-reverse-transition-leave-to {
  transform: translate(0, 100%);
}