// ********************************************
// container definition
$el-container: #{$prefix}-date-input;
$inputs-group: #{$prefix}-input-date-group;
$inputs-group-divider: #{$inputs-group}__divider;

.#{$el-container} {
  height: 100%;
  display: flex;
  align-items: center;
}

.#{$inputs-group} {
  display: flex;
  align-items: center;

  .#{$inputs-group-divider} {
    font-style: italic;
    color: color(neutral, 500);
  }

  .#{$inputs-group-divider}--value {
    font-style: unset;
    color: color(neutral, 800);
  }

  &__input {
    @include placeholder {
      color: color(neutral, 500);
      font-style: italic;
    }    
    text-align: center;
    border: none;
    max-width: space(m) * 1.1;
    outline: none;
    background: none;
    user-select: none;

    &.input-year{
      min-width: space(m) * 1.4;
      max-width: space(m) * 1.8;
    }

    &:focus {
      background: color(brand-primary, 300)
    }

    &:active {
      @include dsActive();
    }
  }
}