.ce-settings {
  @apply --overlay-pane;
  right: 5px;
  top: 35px;
  min-width: 124px;

  &::before{
    left: auto;
    right: 12px;
  }

  display: none;

  &--opened {
    display: block;
  }

  &__plugin-zone {
    &:not(:empty){
      padding: 6px;
    }
  }

  &__default-zone {
    &:not(:empty){
      padding: 6px;
    }
  }

  &__button {
    @apply --toolbar-button;

    &--selected {
      color: var(--color-active-icon);
    }

    &--delete {
      transition: background-color 300ms ease;
      will-change: background-color;

      .icon {
        transition: transform 200ms ease-out;
        will-change: transform;
      }
    }

    &--confirm {
      background-color: var(--color-confirm);
      color: #fff;

      &:hover {
        background-color: color-mod(var(--color-confirm) blackness(+5%)) !important;
      }

      .icon {
        transform: rotate(90deg);
      }
    }
  }
}

.ce-settings-move-up {
  &:hover {
    cursor: pointer;
  }

  &--disabled {
    cursor: not-allowed !important;
    opacity: .3;
  }
}