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

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

:root {
  --#{$name}-padding: 4px 16px;

  // button
  --#{$name}-button-size: 36px;

  // icon
  --#{$name}-icon-font-size: 24px;

  // color
  --#{$name}-button-color: rgba(0, 0, 0, 0.87);
}

.#{$name} {
  position: relative;
  padding: var(--#{$name}-padding);
  align-items: center;
  display: flex;
  justify-content: space-between;

  &--value {
    flex: 1;
    text-align: center;
    position: relative;
    overflow: hidden;

    strong {
      transition: $ivue-transition-default;
      display: block;
      width: 100%;
      font-size: var(--ivue-font-base-size);
    }
  }

  &--value:not(.ivue-date-picker-header--disabled) {
    cursor: pointer;

    strong {
      &:not(:hover) {
        color: var(--#{$name}-button-color) !important;
        background: none;
      }

      &:hover {
        color: var(--ivue-primary-color);
        background: none;
      }
    }
  }

  &--disabled {
    user-select: none;

    strong {
      color: var(--ivue-disabled-color);
    }
  }

  .ivue-button--icon {
    width: var(--#{$name}-button-size);
    min-width: var(--#{$name}-button-size);
    height: var(--#{$name}-button-size);
    margin: 0 !important;
  }

  .ivue-icon {
    font-size: var(--#{$name}-icon-font-size) !important;
  }
}