@use "variables";

%chip-lg {
  font-size: variables.$font-size-base;
  border-radius: variables.$border-radius-xl;
  padding: 0px 16px;
  height: 32px;
  i[class^="fwe-icon-"],
  i[class*=" fwe-icon-"],
  .fwe-svg-icon {
    font-size: 24px;
  }
  &.fwe-selected {
    &.fwe-category {
      padding-right: 30px;
      &::after {
        top: 8px;
        right: 8px;
      }
    }
    &.fwe-filter {
      padding-left: 30px;
      &::before {
        top: 8px;
        left: 8px;
      }
    }
  }
}

.fwe-chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  &.fwe-chip-container-lg {
    .fwe-chip {
      @extend %chip-lg;
    }
  }
}

.fwe-chip {
  height: 24px;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  font-size: variables.$font-size-md;
  text-align: center;
  border-radius: variables.$border-radius-l;
  cursor: pointer;
  background: variables.$control;
  color: variables.$text;
  border: 1px solid variables.$control;
  box-sizing: border-box;
  padding: 0px 12px;
  i[class^="fwe-icon-"],
  i[class*=" fwe-icon-"],
  .fwe-svg-icon {
    margin-left: -4px;
    margin-right: 8px;
    line-height: 1;
  }
  &:hover {
    background: variables.$control-hover;
    border: 1px solid variables.$control-hover;
  }
  &:active {
    background: variables.$control-active;
    border: 1px solid variables.$control-active;
  }
  &.fwe-selected {
    cursor: default;
    background: transparent;
    border: 1px solid variables.$hero;
    color: variables.$hero;
    &.fwe-category {
      cursor: pointer;
      padding-right: 24px;
      &::after {
        content: "";
        position: absolute;
        right: 5px;
        top: 3px;
        height: 16px;
        width: 16px;
        background-color: variables.$text;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMzMzIi8+DQoJPC9nPg0KPC9zdmc+");
      }
      &:hover {
        border: 1px solid variables.$hero-hover;
        color: variables.$hero-hover;
        &::after {
          background-color: variables.$hero-hover;
        }
      }
      &:active {
        border: 1px solid variables.$hero-active;
        color: variables.$hero-active;
        &::after {
          background-color: variables.$hero-active;
        }
      }
    }
    &.fwe-filter {
      cursor: pointer;
      padding-left: 24px;
      &::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 3px;
        height: 16px;
        width: 16px;
        background: variables.$hero;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQoJPGcgaWQ9ImJhNmJmZGNhLWJhMzgtNDczMC04MjlkLTcyYmIzNzI3YjUzNCIgZGF0YS1uYW1lPSJjb250ZW50Ij4NCgkJPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+DQoJCTxwb2x5Z29uIHBvaW50cz0iNi4xNDEgMTIuODE0IDEuOTM0IDguNjA3IDMuMzQ4IDcuMTkzIDYuMTQxIDkuOTg2IDEyLjkzNCAzLjE5MyAxNC4zNDggNC42MDcgNi4xNDEgMTIuODE0IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
      }
      &:hover {
        border: 1px solid variables.$hero-hover;
        color: variables.$hero-hover;
        &::before {
          background-color: variables.$hero-hover;
        }
      }
      &:active {
        border: 1px solid variables.$hero-active;
        color: variables.$hero-active;
        &::before {
          background-color: variables.$hero-active;
        }
      }
    }
  }
  &.fwe-readonly {
    cursor: default;
    background: transparent;
    color: variables.$control-border;
    border: 1px solid variables.$control-border;
  }
  &.fwe-disabled {
    cursor: default;
    background: variables.$control-disabled;
    border: 1px solid variables.$control-disabled;
    color: variables.$text-disabled;

    &.fwe-filter.fwe-selected {
      cursor: default;
      &::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNi4xNDEsMTIuODE0LDEuOTM0LDguNjA3LDMuMzQ4LDcuMTkzLDYuMTQxLDkuOTg2bDYuNzkzLTYuNzkzLDEuNDE0LDEuNDE0WiIgZmlsbD0iI2I5YmFiYiIvPjwvc3ZnPg==");
      }
    }
  }

  &.fwe-chip-lg {
    @extend %chip-lg;
  }
}