.tag:not(:empty) {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.24px;
  line-height: 17px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  padding: 4px 11px;

  &.beta {
    font-size: 14px;
    font-weight: 600;
  }

  &.color-primary {
    background: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);

    &.hover:hover {
      background: var(--color-primary);
      color: white;
    }
  }

  &.color-secondary {
    background: white;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);

    &.hover:hover {
      background: var(--color-secondary);
      color: white;
    }
  }

  &.color-third {
    background: white;
    border: 1px solid var(--color-third);
    color: var(--color-third);

    &.hover:hover {
      background: var(--color-third);
      color: white;
    }
  }

  &.reversed {
    &.color-primary {
      background: var(--color-primary);
      border: 1px solid var(--color-primary);
      color: white;

      &.hover:hover {
        background: white;
        color: var(--color-primary);
      }
    }

    &.color-secondary {
      background: var(--color-secondary);
      border: 1px solid var(--color-secondary);
      color: white;

      &.hover:hover {
        background: white;
        color: var(--color-secondary);
      }
    }

    &.color-third {
      background: var(--color-third);
      border: 1px solid var(--color-third);
      color: white;

      &.hover:hover {
        background: white;
        color: var(--color-third);
      }
    }
  }
}