$name: 'ivue-date-picker-title';
.#{$name} {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex-wrap: wrap;
      line-height: 1;
      color: #fff;
      &--btn {
            transition: $ivue-transition-default;
      }
      &--year {
            align-items: center;
            display: inline-flex;
            font-size: $font-base-size;
            font-weight: 500;
            margin-bottom: 8px;
            cursor: pointer;
            transition: $ivue-transition-default;
            &:hover{
                  color: rgba($color: #fff, $alpha: 0.6);
            }
            i{
                  margin: initial
            }
      }
      &--date {
            font-size: 34px;
            text-align: left;
            font-weight: 500;
            position: relative;
            overflow: hidden;
            padding-bottom: 16px;
      }
}

.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,
.picker-transition-leave-to,
.picker-reverse-transition-enter,
.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 {
      transform: translate(0, 100%);
}

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

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

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