.ce-settings {
  @apply --overlay-pane;
  right: -1px;
  top: 30px;
  min-width: 114px;
  box-sizing: content-box;

  @media (--mobile){
    bottom: 40px;
    right: -11px;
    top: auto;
  }

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

    @media (--mobile){
      bottom: -5px;
      top: auto;
    }
  }

  display: none;

  &--opened {
    display: block;
    animation-duration: 0.1s;
    animation-name: panelShowing;
  }

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

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

  &__button {
    @apply --toolbar-button;

    &:not(:nth-child(3n+3)) {
      margin-right: 3px;
    }

    &:nth-child(n+4) {
      margin-top: 3px;
    }

    line-height: 32px;

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

    &--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) !important;
      color: #fff;

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

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