@import '../../date-picker-view/style/component.scss';

@include b(datepicker) {
  @include e(wrapper) {
    background: var(--picker-background);
  }

  @include m(block) {
    width: 100%;
  }

  @include m(input) {
    width: 100%;
    padding: var(--picker-padding-v) 0;
  }

  @include m(placeholder) {
    color: var(--placeholder-color);
  }

  @include m(disabled) {
    color: var(--disabled-color);
  }

  @include e(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: var(--picker-header-height);
    font-size: var(--picker-header-font-size);
    line-height: var(--picker-header-line-height);
    @include onepx(bottom);
  }

  @include e(cancel,submit) {
    flex: 1;
    padding: 0 var(--picker-padding-h);
    cursor: pointer;
  }

  @include e(cancel) {
    text-align: left;
    color: var(--color-text-caption);
  }

  @include e(submit) {
    text-align: right;
    color: var(--theme-primary);
  }

  @include e(title) {
    color: var(--color-text);
  }
}