@use 'gjs_vars';
@use 'gjs_category_general';

.#{gjs_vars.$rte-prefix} {
  &toolbar {
    @extend .#{gjs_vars.$app-prefix}no-user-select;

    position: absolute;
    z-index: 10;
  }

  &toolbar-ui {
    border: 1px solid var(--gjs-main-dark-color);
    border-radius: 3px;
  }

  &actionbar {
    display: flex;
  }

  &action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 25px;
    border-right: 1px solid var(--gjs-main-dark-color);
    text-align: center;
    cursor: pointer;
    outline: none;

    &:last-child {
      border-right: none;
    }

    &:hover {
      background-color: var(--gjs-main-light-color);
    }
  }

  &active {
    background-color: var(--gjs-main-light-color);
  }
  &disabled {
    color: var(--gjs-main-light-color);
    cursor: not-allowed;
    &:hover {
      background-color: unset;
    }
  }
}