@include b(date-select) {
  @include define(arrow-color, var(--za-arrow-color));
  @include define(arrow-size, var(--za-arrow-size));
  @include define(arrow-width, var(--za-arrow-width));
  @include define(placeholder-color, var(--za-color-text-placeholder));
  @include define(disabled-color, var(--za-color-text-disabled));

  display: flex;
  align-items: center;
  width: 100%;

  @include e(input) {
    flex: 1;
    position: relative;
    width: 100%;
  }

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

  @include e(arrow) {
    margin-left: 5px;
    margin-top: calc(var(--arrow-size) / -2);

    &:after {
      display: inline-block;
      content: '';
      border-right: var(--arrow-width) solid var(--arrow-color);
      border-bottom: var(--arrow-width) solid var(--arrow-color);
      width: var(--arrow-size);
      height: var(--arrow-size);
      transform: rotate(45deg);
      transition: all 0.15s ease-out;
    }
  }

  @include m(visible) {
    @include e(arrow) {
      &:after {
        transform: rotate(-45deg);
      }
    }
  }

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