@import 'variable';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-selector {
  .#{$class-prefix}-selector {
    &-grid {
      display: grid;
      --columns: 1;
      column-gap: var(--cn-selector-gap);
      row-gap: var(--cn-selector-gap);
      grid-column-gap: var(--cn-selector-gap);
      grid-row-gap: var(--cn-selector-gap);
      grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
      align-items: stretch;
    }

    .#{$class-prefix}-select-tag {
      flex-wrap: 0;
      flex-shrink: 0;
    }
  }

  // size
  @each $size in $sizes {
    &--#{$size} {
      .#{$class-prefix}-select-tag-type-default {
        border-color: $m-color-bg-disabled;
        background-color: $m-color-bg-disabled;
      }
    }
  }

  .mt-tag--selectable-solid {
    border-width: $m-line;
  }
}