// ********************************************
// container definition
$el-container: #{$prefix}-input-time;
$inputs-group: #{$prefix}-input-times-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;
    width: 25px;
    outline: none;
    background: none;
    user-select: none;

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

    &::placeholder {
      text-align: center;
      font-style: italic;
    }

    &:placeholder-shown {
      text-align: left;
      width: 25px;
    }

    &:nth-child(3) {
      margin: 0 space(m) * 0.1;
    }
  }

  &__am-pm-input {
    &::-ms-expand {
      display: none;
    }
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    padding: space(xxs) * 0.5 space(xxs);

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