@use "buttons-helpers" as *;

@use "../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Buttons (in forms and text).
// *
////////////////////////////////////////////////////////////////////////////////

// * Preset classes.
// =============================================================================

// primary button styling is added to the '.button' class
// and various versions of form submits and form buttons.
// You are responsible for making sure 'submit' buttons get the correct styling.
// You can modify the $buttons-list variable with extra elements,
// or add more classes here.

.button {
  @include button-primary();
}

.button--secondary {
  @include button-secondary();
}

.button--negative {
  @include button-negative();
}

.button--negative-secondary {
  @include button-negative-secondary();
}

[id*="edit-cancel"],
[id*="edit-delete"] {
  @include button-secondary();
}

.button--sm {
  @include button-size("sm");
}

.button--md {
  @include button-size("md");
}

.button--lg {
  @include button-size("lg");
}


// * Grouping of buttons.
// =============================================================================

.field--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-buttons, #{rem(20)});

  .cb--vm-centered & {
    justify-content: center;
  }
}

// E.g. on 403 page.

.actions {
  margin-top: rem(10);

  .actions__divider,
  .button {
    display: block;
    margin-top: rem(10);
  }

  .actions__divider {
    text-align: center;
  }

  @include bp-sm {
    margin-top: rem(10);
    margin-left: rem(-10);

    .actions__divider {
      text-align: left;
    }

    .actions__divider,
    .button {
      display: inline-block;
      margin-left: rem(10);
    }
  }
}

// * Buttons in CKE
// =============================================================================

:is(
  .text-long,
  .cke_editable,
  .ck-editor__editable
) {
  .cke-button {
    @include button-primary();
  }

  .cke-button--secondary {
    @include button-secondary();
  }

  // grouping
  p {
    .actions__divider {
      margin-right: rem(10);
    }

    .cke-button {
      margin-top: rem(10);
      border-bottom: 0 none;

      &:not(:last-child) {
        margin-right: rem(10);
      }

      // Don't forget to override any styling that might be inherited
      // by the link styling in atoms/links.
      &::before,
      &::after {
        display: none;
      }
    }

    .cke-button--secondary {
      margin-top: rem(10);
      border-bottom: 0 none;

      &:not(:last-child) {
        margin-right: rem(10);
      }

      // Don't forget to override any styling that might be inherited
      // by the link styling in atoms/links.
      &::before,
      &::after {
        display: none;
      }
    }
  }
}
