.mj-selector {
  display: flex;
  align-items: center;
  gap: $selector-gap;

  &-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    height: $selector-item-default-height;
    padding: 0 $spacing-3;
    color: $selector-item-color;
    font-size: $selector-item-font-size;
    background-color: $selector-item-background-color;
    border-radius: $selector-item-radius;
    border: 1px solid $selector-item-background-color;

    &:first-child {
      margin-left: 0;
    }
  }

  &-item-active {
    color: $selector-item-active-color;
    background-color: $selector-item-active-background-color;
    border-color: $selector-item-active-border-color;
    font-weight: $font-weight-bold;

    .mj-selector-selected {
      position: absolute;
      right: -1px;
      bottom: -1px;
      font-size: $selector-item-active-icon-size;
      line-height: $selector-item-active-icon-size;
      width: $selector-item-active-icon-size;
      height: $selector-item-active-icon-size;
      color: $selector-item-active-color;
    }
  }

  &-item-disabled {
    opacity: $color-disabled-opacity;
  }
  
  &-item-columns {
    padding: 0;
    flex: 0 0 calc((100% - ($selector-columns - 1) * $selector-gap) / $selector-columns);
  }
}

.mj-selector-small {
  .mj-selector-item {
    height: $selector-item-small-height;
  }
}

.mj-selector-large {
  .mj-selector-item {
    height: $selector-item-large-height;
  }
}

.mj-selector-disabled {
  .mj-selector-item {
    opacity: $color-disabled-opacity;
  }
}

.mj-selector-wrap {
  flex-wrap: wrap;
  margin-left: 0;
}