.text-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  padding: var(--spacing-1) var(--spacing-3);

  border-bottom: 1px solid #ccc;

  .text-editor-toolbar__divider {
    width: 1px;
    height: 20px;
    margin: 0 4px;

    background-color: #ccced1;
  }

  .text-editor-toolbar__button,
  .text-editor-toolbar__select {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--spacing-6);
    height: var(--spacing-6);
    padding: var(--spacing-1);

    transition: background-color 0.2s ease, border-color 0.2s ease;

    border: 1px solid transparent;
    border-radius: var(--radius-small-2);

    cursor: pointer;

    &:hover,
    &:active {
      background-color: var(--slate-3);
    }

    &:focus {
      border: 1px solid var(--blue-8);
      outline: none;
    }
  }

  .text-editor-toolbar__button--active {
    background-color: var(--blue-2);

    color: var(--blue-9);
    font-weight: bold;

    &:hover {
      background-color: var(--blue-1);
    }
  }

  .text-editor-toolbar__button svg {
    width: var(--font-size-3);
    height: var(--font-size-3);

    fill: currentColor;
  }
}

