.react-select-tags {
  .tag {
    position: relative;
    display: flex;
    align-items: center;
    background: $rstTagBgColor;
    border-radius: $rstTagBorderRadius;
    max-width: 100%;

    &.locked {
      cursor: default;
      user-select: none;
    }

    &:not(.locked) {
      .tagWrapper {
        .content {
          background-color: white;
        }
      }
    }

    &.readonly {
      .tagWrapper {
        .contentWrapper {
          max-width: 100%;
        }
      }
    }

    &:not(.readonly) {
      .tagWrapper {
        .contentWrapper {
          max-width: calc(100% - $rstTagRemoveButtonWidth);

          input,
          .content {
            border-right: none !important;
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
          }
        }
      }
    }

    &.invalid {
      .tagWrapper {
        .content {
          border: 1px solid $rstInvalid !important;
        }
      }
    }

    .tagWrapper {
      display: flex;
      flex-direction: row;
      max-width: 100%;

      .contentWrapper {
        position: relative;

        .content, input {
          font-size: $rstTagFontSize;
          line-height: 1;
          border: 1px solid $rstTagBgColor;
          border-radius: $rstTagBorderRadius;
          padding: 4px 10px 4px 10px;
        }

        .content {
          color: $rstTagColor;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        input {
          color: $rstTagInputTextColor;
          position: absolute;
          left: 0;
          top: 0;
          outline: 0;
          height: 100%;
          font-family: inherit;
          width: 100%;
        }
      }

      .remove {
        position: relative;
        width: $rstTagRemoveButtonWidth;

        cursor: pointer;
        font-size: $rstTagFontSize - 0.15;
        background: $rstTagRemoveBgColor;
        border: 1px solid $rstTagBgColor;
        border-top-right-radius: $rstTagBorderRadius;
        border-bottom-right-radius: $rstTagBorderRadius;

        &:before, &:after {
          position: absolute;
          top: 50%;
          left: 50%;
          content: ' ';
          width: 2px;
          height: $rstTagFontSize;
          background-color: $rstTagBgColor;
        }

        &:before {
          transform: translateX(-50%) translateY(-50%) rotate(45deg);
        }

        &:after {
          transform: translateX(-50%) translateY(-50%) rotate(-45deg);
        }

        &:hover {
          background: darken($rstTagBgColor, 10%);
          border: 1px solid darken($rstTagBgColor, 10%);

          &:before, &:after {
            background-color: $rstTagRemoveBgColor;
          }
        }
      }
    }
  }
}