.c-rte-toolbar {
  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md pl-4 pr-2 align-middle;

  /* Allow for customization from the outside */
  padding-top: var(--c-rte-toolbar-pt, 0.25rem);
  padding-left: var(--c-rte-toolbar-pl, 0.5rem);
  padding-right: var(--c-rte-toolbar-pr, 0.5rem);

  container-type: inline-size;
  container-name: rich-text-toolbar;

  &__inner {
    @apply flex;
  }

  &__icon {
    @apply h-6 w-4 border bg-[length:17px_17px] bg-center bg-no-repeat;

    &.disabled {
      @apply opacity-30;
    }
  }

  &__block-format__icon {
    @apply h-6 w-6 rounded-md border bg-[length:18px_18px] bg-center bg-no-repeat opacity-60;

    &.selected {
      @apply bg-purple-50-900 opacity-100;
    }
  }

  &__block-format__text {
    @apply min-w-[150px] px-3 text-sm font-normal;

    &.selected {
      @apply font-bold;
    }
  }

  &__block-format__icon {
    @apply h-6 w-6 rounded-md border bg-[length:18px_18px] bg-center bg-no-repeat;
  }

  &__toggle-icon {
    @apply h-6 w-6 border bg-[length:18px_18px] bg-center bg-no-repeat;
  }

  &__code-lang {
    &__button-text {
      @apply text-sm font-medium;
    }
    &__sel-item {
      @apply block min-w-[200px] px-3 text-sm font-normal opacity-80;

      &.selected {
        @apply font-bold opacity-100;
      }
    }
  }

  &__divider {
    width: 1px;
    background-color: #eee;
    margin: 0 4px;
  }

  &__actions-rest {
    @apply flex gap-1;
  }

  &__icon-btn {
    @apply opacity-60;

    &.selected {
      @apply !bg-purple-50-900 opacity-100;
    }

    &__icon {
      @apply h-full w-full border bg-[length:18px_18px] bg-center bg-no-repeat;
    }
  }

  &__dd-item {
    &__icon {
      @apply h-6 w-6 rounded-sm border bg-[length:16px_16px] bg-center bg-no-repeat opacity-60;

      &.selected {
        @apply !bg-purple-50-900 opacity-100;
      }
    }
    &__text {
      @apply px-3 font-sans text-sm font-normal;

      &.selected {
        @apply font-medium;
      }

      &--clear {
        @apply ml-3 text-pink-600-300;
      }
    }

    &--table {
      @apply flex items-center font-sans font-normal;
    }
  }

  &__plus {
    @apply h-full w-full border bg-[length:20px_20px] bg-center bg-no-repeat;
  }
}

.c-rte-insert-table {
  @apply items-center justify-between;

  &__dimensions {
    @apply grid-cols-[1fr_1px_1fr] rounded-md border border-solid border-gray-100-800 shadow-sm;
    display: grid;

    &__separator {
      @apply h-full bg-gray-100-800;
    }
  }

  &__actions {
    @apply mt-3 flex justify-end;
  }
}

@container rich-text-toolbar (max-width: 600px) {
  .c-rte-toolbar .c-rte-toolbar__icon-btn {
    display: none;
  }
}
