@use "sass:math";
@use "sass:map";
@use "@befe/brick-style/src/themes/base";
@use "@befe/brick-style/src/themes/date-picker";

.brick-range-picker {
  width: 100%;
  display: inline-block;

  $color-separator: base.color-gray(7);
  $width-separator: map.get(date-picker.$range-picker-separator-width, base.$base-size);

  input {
    border: 0;
    width: calc(50% - #{math.div($width-separator, 2)});

    &:focus {
      box-shadow: none;
    }
  }

  .brick-input-status-error {
    &, &.brick-input-hover {
      input:focus {
        box-shadow: none;
      }
    }
  }

  .brick-sep {
    display: inline-block;
    user-select: none;
    color: $color-separator;
    width: $width-separator;
    text-align: center;
  }

  .brick-input-disabled {
    .brick-sep {
      color: base.$color-text-disabled;
    }
  }
}

@each $size in date-picker.$date-picker-size-list {
  .brick-range-picker-size-#{$size} {
    $width-separator: map.get(date-picker.$range-picker-separator-width, $size);
    input {
      width: calc(50% - #{math.div($width-separator, 2)});
    }
    .brick-sep {
      width: $width-separator;
    }
  }
}