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

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

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

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

  display: none;

  &--opened {
    display: block;
    animation-duration: 0.5s;
    animation-name: bounceIn;
  }

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

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

  &__button {
    @apply --toolbar-button;

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

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

    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);
      }
    }
  }
}