@import '~styles/mixins';
@import '~styles/adminMixins';

.language-selector {
  margin-top: 20px;

  .item-container {
    display: flex;
    justify-content: space-between;
  }

  .item-individual {
    flex-wrap: wrap;
    display: flex;
    color: $color_primary;
    > * {
      margin-bottom: 4px;
      margin-right: 8px;
      font-weight: bold;
    }
  }
  .item-all {
    flex-shrink: 0;
  }

  .item-lg {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 3px;
    border: 2px solid $color_primary;
    color: $color_primary;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.2px;
    cursor: pointer;
    align-items: center;
    user-select: none;

    &:hover:not(.active) {
      background-color: rgba($color: $color_primary, $alpha: 0.2);
    }

    &.active {
      background-color: $color_primary;
      color: white;
    }

    &.all-select {
      text-transform: none;
      font-weight: bold;
    }
  }
}
