.root {
  display: inline;
}

.text {
  &--primary {
    color: var(--primary-text-color);
  }

  &--secondary {
    color: var(--secondary-text-color);
  }

  &--disabled {
    color: var(--disabled-text-color);
  }

  &--warning {
    color: var(--warning-text-color);
  }

  &--link {
    color: var(--primary-text-link);
  }

  &--success {
    color: var(--green-5);
  }

  &--strong {
    font-weight: bold;
  }

  &--underline {
    text-decoration: underline;
  }

  &--small {
    font-size: 12px;
  }

  &--large {
    font-size: 20px;
  }
}

.no-wrap {
  white-space: nowrap;
}

.keyboard {
  margin: 0 0.2em;
  padding: 0.15em 0.4em 0.1em;
  font-size: 90%;
  background: hsla(0, 0%, 58.8%, 0.06);
  border: solid hsla(0, 0%, 39.2%, 0.2);
  border-width: 1px 1px 2px;
  border-radius: 3px;
}

.title {
  margin: 0;
}

.icon-button {
  margin-left: 4px;
  display: none;
}

.root:hover .icon-button {
  display: inline-block;
}