/* =================================

    Variables   
================================= */
/*
    Table of Contents


    * Typography ====

    * Font famliy 
    * Font Weights 
    * Sizes 
    * Heading Sizes
    * Breakpoints
    * Spacing

*/
/*=============================================
=            Gradients            =
=============================================*/
/*=============================================
=            Shadows            =
=============================================*/
/*=============================================
 =            Radius            =
 =============================================*/
/*=============================================
 =            Typography            =
 =============================================*/
/* Font Family */
/*=============================================
 =            Breakpoints            =
 =============================================*/
/*=====  End of Breakpoins  ======*/
/*=============================================
=            Updated Variables            =
=============================================*/
/* numbers */
/*=====  End of Updated Variables  ======*/
/* Move to rem */
/*=============================================
 =            Colors            =
 =============================================*/
/*=============================================
=            Primary            =

    * Primary color pallete is used on the all interactive elements, like CTA's,
     links, active states, inputs...
=============================================*/
/*=============================================
=            Secondary Colors            =
=============================================*/
/*=============================================
=            Tertiary Colors            =
=============================================*/
/*=============================================
=            Neutral Colors            =
=============================================*/
/*=============================================
=            Success Colors            =
=============================================*/
/* Button Success */
/*=============================================
=            Warnings Colors           =
=============================================*/
/* Button Warning */
/*=============================================
=            Information Colors            =
=============================================*/
/*=============================================
=            Error Colors            =
=============================================*/
/*=============================================
=            Grey Colors            =

Grey colors are most often used. These colors 
are used mostly for backgrounds, text, inputs, etc.
=============================================*/
/*=============================================
=            Text Colors - On Light Mode            =
These colors are used for text on the light mode.
=============================================*/
/*=============================================
=            Text Colors - On Dark Mode            =
These colors are used for text on the dark mode.
=============================================*/
/*=====  End of updated colors  ======*/
/* Utilties */
.ab-error-500 {
  color: #F04438;
}

/*=============================================
=            SEMANTIC TOKENS            =

    * Component-level tokens from the new design token set.
    * Values are literal on purpose: they mirror the exported
      JSON exactly. Swap them for primitive references
      (e.g. $background-primary: $primary;) if you prefer.
=============================================*/
/*=============================================
=            Backgrounds & Surfaces            =
=============================================*/
/*=============================================
=            Text - Semantic            =
=============================================*/
/*=============================================
=            Disabled States            =
=============================================*/
/*=============================================
=            Borders            =
=============================================*/
/*=============================================
=            Buttons            =
=============================================*/
/*=============================================
=            Chips            =
=============================================*/
/*=============================================
=            Links            =
=============================================*/
/*=============================================
=            Icons            =
=============================================*/
/*=============================================
=            Tags            =
=============================================*/
/*=============================================
=            Forms & Fields            =
=============================================*/
/*=============================================
=            Date Cells            =
=============================================*/
/*=============================================
=            Controls            =
=============================================*/
/*=============================================
=            Tables            =
=============================================*/
/*=============================================
=            Steppers            =
=============================================*/
/*=============================================
=            Tooltips            =
=============================================*/
/*=============================================
=            Charts & Progress            =
=============================================*/
/*=============================================
=            Alpha / Transparency            =
=============================================*/
/* =================================

    Variables   
================================= */
/*
    Table of Contents


    * Typography ====

    * Font famliy 
    * Font Weights 
    * Sizes 
    * Heading Sizes
    * Breakpoints
    * Spacing

*/
/*=============================================
=            Gradients            =
=============================================*/
/*=============================================
=            Shadows            =
=============================================*/
/*=============================================
 =            Radius            =
 =============================================*/
/*=============================================
 =            Typography            =
 =============================================*/
/* Font Family */
/*=============================================
 =            Breakpoints            =
 =============================================*/
/*=====  End of Breakpoins  ======*/
/*=============================================
=            Updated Variables            =
=============================================*/
/* numbers */
/*=====  End of Updated Variables  ======*/
/* Move to rem */
/*=============================================
=            SCSS Mixins                      =
=============================================*/
/**
  * Media Query Mixins
  */
/* respond to different screen sizes by min width */
/* respond to different screen sizes by max width */
/* respond to different screen sizes by min width */
/* respond to different screen sizes by max width */
/* respond to different screen sizes by min and max width */
/**
  * Shadow Mixin Variatons
  */
.ab-btn, .ab-btn--transparent, .ab-btn--solid, .ab-btn--outline, .ab-btn--ghost {
  font-family: "IBM Plex Sans Arabic";
  display: inline-flex;
  height: 2.5rem;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  outline: 0;
  font-size: 1rem;
  font-weight: normal;
  min-width: fit-content;
  transition: background-color 0.3s ease;
}
.ab-btn:disabled, .ab-btn--transparent:disabled, .ab-btn--solid:disabled, .ab-btn--outline:disabled, .ab-btn--ghost:disabled, .ab-btn--ghost.disabled:hover, .ab-btn--outline.disabled:hover, .ab-btn--solid.disabled:hover, .ab-btn:disabled:hover, .ab-btn--transparent:disabled:hover, .ab-btn--solid:disabled:hover, .ab-btn--outline:disabled:hover, .ab-btn--ghost:disabled:hover, .ab-btn.disabled:hover, .disabled.ab-btn--transparent:hover, .ab-btn.disabled, .disabled.ab-btn--transparent, .disabled.ab-btn--solid, .disabled.ab-btn--outline, .disabled.ab-btn--ghost {
  background-color: var(--ab-grey-100);
  border-color: var(--ab-grey-100);
  color: var(--ab-grey-400);
  cursor: not-allowed;
}
.ab-btn:disabled a, .ab-btn--transparent:disabled a, .ab-btn--solid:disabled a, .ab-btn--outline:disabled a, .ab-btn--ghost:disabled a, .ab-btn--ghost.disabled:hover a, .ab-btn--outline.disabled:hover a, .ab-btn--solid.disabled:hover a, .ab-btn:disabled:hover a, .ab-btn--transparent:disabled:hover a, .ab-btn--solid:disabled:hover a, .ab-btn--outline:disabled:hover a, .ab-btn--ghost:disabled:hover a, .ab-btn.disabled:hover a, .disabled.ab-btn--transparent:hover a, .ab-btn.disabled a, .disabled.ab-btn--transparent a, .disabled.ab-btn--solid a, .disabled.ab-btn--outline a, .disabled.ab-btn--ghost a {
  pointer-events: none;
}
.ab-btn--solid, .ab-btn--outline, .ab-btn--ghost {
  background-color: var(--ab-primary);
  border: 1px solid var(--ab-primary);
  color: var(--Text-btn-white);
}
.ab-btn--solid.primary, .primary.ab-btn--outline, .primary.ab-btn--ghost {
  background-color: var(--ab-primary);
  border-color: var(--ab-primary);
}
.ab-btn--solid.primary:hover, .primary.ab-btn--outline:hover, .primary.ab-btn--ghost:hover {
  background-color: var(--ab-primary-darker);
  border-color: var(--ab-primary-darker);
}
.ab-btn--solid.primary:focus, .primary.ab-btn--outline:focus, .primary.ab-btn--ghost:focus, .ab-btn--solid.primary:focus-visible, .primary.ab-btn--outline:focus-visible, .primary.ab-btn--ghost:focus-visible {
  background-color: var(--ab-primary-900);
  border-color: var(--ab-primary-darker);
}
.ab-btn--solid.success, .success.ab-btn--outline, .success.ab-btn--ghost {
  background-color: var(--ab-system-success);
  border-color: var(--ab-system-success);
}
.ab-btn--solid.success:hover, .success.ab-btn--outline:hover, .success.ab-btn--ghost:hover {
  background-color: var(--ab-system-success-darker);
  border-color: var(--ab-system-success-darker);
}
.ab-btn--solid.tertiary, .tertiary.ab-btn--outline, .tertiary.ab-btn--ghost {
  background-color: var(--ab-tertiary);
  border-color: var(--ab-tertiary);
  color: var(--Text-btn-white);
}
.ab-btn--solid.tertiary:hover, .tertiary.ab-btn--outline:hover, .tertiary.ab-btn--ghost:hover {
  background-color: var(--ab-tertiary-darker);
  border-color: var(--ab-tertiary-darker);
}
.ab-btn--solid.tertiary:focus-visible, .tertiary.ab-btn--outline:focus-visible, .tertiary.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid.secondary, .secondary.ab-btn--outline, .secondary.ab-btn--ghost {
  background-color: var(--ab-secondary);
  border-color: var(--ab-secondary);
}
.ab-btn--solid.secondary:hover, .secondary.ab-btn--outline:hover, .secondary.ab-btn--ghost:hover {
  background-color: var(--ab-secondary-darker);
  border-color: var(--ab-secondary-darker);
}
.ab-btn--solid.secondary:focus-visible, .secondary.ab-btn--outline:focus-visible, .secondary.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid.error, .error.ab-btn--outline, .error.ab-btn--ghost {
  background-color: var(--ab-system-error-dark);
  border-color: var(--ab-system-error-dark);
  color: var(--ab-white);
}
.ab-btn--solid.error:hover, .error.ab-btn--outline:hover, .error.ab-btn--ghost:hover {
  background: var(--Surface-Action-Error-Hover, #812222);
  border-color: var(--ab-system-error-dark);
}
.ab-btn--solid.error:focus, .error.ab-btn--outline:focus, .error.ab-btn--ghost:focus, .ab-btn--solid.error:focus-visible, .error.ab-btn--outline:focus-visible, .error.ab-btn--ghost:focus-visible {
  background: var(--ab-error-850);
}
.ab-btn--solid.error:focus-visible, .error.ab-btn--outline:focus-visible, .error.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid.neutral, .neutral.ab-btn--outline, .neutral.ab-btn--ghost {
  background-color: var(--ab-neutral-950);
  border-color: var(--ab-neutral-950);
  color: var(--Text-btn-white);
}
.ab-btn--solid.neutral i, .neutral.ab-btn--outline i, .neutral.ab-btn--ghost i {
  color: var(--Text-btn-white);
}
.ab-btn--solid.neutral:hover, .neutral.ab-btn--outline:hover, .neutral.ab-btn--ghost:hover {
  background-color: var(--ab-neutral-800);
  border-color: var(--ab-neutral-800);
  color: var(--Text-btn-white);
}
.ab-btn--solid.neutral:active, .neutral.ab-btn--outline:active, .neutral.ab-btn--ghost:active {
  background-color: var(--ab-neutral-700);
}
.ab-btn--solid.neutral:focus, .neutral.ab-btn--outline:focus, .neutral.ab-btn--ghost:focus, .ab-btn--solid.neutral:focus-visible, .neutral.ab-btn--outline:focus-visible, .neutral.ab-btn--ghost:focus-visible {
  background-color: var(--ab-neutral-800);
  border-color: var(--ab-neutral-800);
}
.ab-btn--solid.neutral:focus-visible, .neutral.ab-btn--outline:focus-visible, .neutral.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid.default, .default.ab-btn--outline, .default.ab-btn--ghost {
  background-color: var(--ab-neutral-100);
  border-color: var(--ab-neutral-100);
  color: var(--ab-black);
}
.ab-btn--solid.default i, .default.ab-btn--outline i, .default.ab-btn--ghost i {
  color: var(--ab-black);
}
.ab-btn--solid.default:hover, .default.ab-btn--outline:hover, .default.ab-btn--ghost:hover {
  background-color: var(--ab-neutral-400);
  border-color: var(--ab-neutral-400);
  color: var(--ab-black);
}
.ab-btn--solid.default:focus, .default.ab-btn--outline:focus, .default.ab-btn--ghost:focus, .ab-btn--solid.default:focus-visible, .default.ab-btn--outline:focus-visible, .default.ab-btn--ghost:focus-visible {
  background-color: var(--ab-neutral-400);
  border-color: var(--ab-neutral-400);
}
.ab-btn--solid.default:focus-visible, .default.ab-btn--outline:focus-visible, .default.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid.warning, .warning.ab-btn--outline, .warning.ab-btn--ghost {
  background-color: var(--ab-warning-400);
  border-color: var(--ab-warning-400);
  color: var(--ab-white);
}
.ab-btn--solid.warning:hover, .warning.ab-btn--outline:hover, .warning.ab-btn--ghost:hover {
  background: var(--ab-warning-600);
  border-color: var(--ab-warning-600);
}
.ab-btn--solid.warning:focus, .warning.ab-btn--outline:focus, .warning.ab-btn--ghost:focus, .ab-btn--solid.warning:focus-visible, .warning.ab-btn--outline:focus-visible, .warning.ab-btn--ghost:focus-visible {
  background: var(--ab-warning-600);
}
.ab-btn--solid.warning:focus-visible, .warning.ab-btn--outline:focus-visible, .warning.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--solid:disabled, .ab-btn--outline:disabled, .ab-btn--ghost:disabled, .ab-btn--ghost.disabled:hover, .ab-btn--outline.disabled:hover, .ab-btn--solid.disabled:hover, .ab-btn--solid:disabled:hover, .ab-btn--outline:disabled:hover, .ab-btn--ghost:disabled:hover, .ab-btn--solid.disabled, .disabled.ab-btn--outline, .disabled.ab-btn--ghost {
  background: var(--ab-grey-100);
  color: var(--ab-text-disabled);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
.ab-btn--outline, .ab-btn--ghost {
  background-color: var(--Text-btn-white);
  color: var(--ab-primary);
}
.ab-btn--outline i, .ab-btn--ghost i {
  color: var(--ab-primary);
}
.ab-btn--outline:hover, .ab-btn--ghost:hover {
  background-color: var(--ab-primary-100);
  color: var(--ab-primary-dark);
}
.ab-btn--outline:hover i, .ab-btn--ghost:hover i {
  color: var(--ab-primary-dark);
}
.ab-btn--outline.primary, .primary.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  border-color: var(--ab-primary);
}
.ab-btn--outline.primary:hover, .primary.ab-btn--ghost:hover {
  background-color: var(--ab-primary-100);
  border-color: var(--ab-primary-dark);
}
.ab-btn--outline.primary:active, .primary.ab-btn--ghost:active {
  background-color: var(--ab-primary-200);
  border-color: var(--ab-primary-300);
  color: var(--ab-primary-700);
}
.ab-btn--outline.primary:active i, .primary.ab-btn--ghost:active i {
  color: var(--ab-primary-700);
}
.ab-btn--outline.primary:active svg, .primary.ab-btn--ghost:active svg {
  fill: var(--ab-primary-700) !important;
}
.ab-btn--outline.primary:active svg g path, .primary.ab-btn--ghost:active svg g path {
  fill: var(--ab-primary-700) !important;
}
.ab-btn--outline.primary:focus, .primary.ab-btn--ghost:focus, .ab-btn--outline.primary:focus-visible, .primary.ab-btn--ghost:focus-visible {
  background-color: var(--ab-primary-200);
  color: var(--ab-primary-700);
}
.ab-btn--outline.primary:focus i, .primary.ab-btn--ghost:focus i, .ab-btn--outline.primary:focus-visible i, .primary.ab-btn--ghost:focus-visible i {
  color: ar(--ab-primary-700);
}
.ab-btn--outline.primary:focus-visible, .primary.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.success, .success.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  border-color: var(--ab-success);
}
.ab-btn--outline.success:hover, .success.ab-btn--ghost:hover {
  background-color: var(--ab-success-100);
  border-color: var(--ab-success-200);
}
.ab-btn--outline.success:active, .success.ab-btn--ghost:active {
  background-color: var(--ab-success-200);
  border-color: var(--ab-success-300);
}
.ab-btn--outline.success:focus, .success.ab-btn--ghost:focus, .ab-btn--outline.success:focus-visible, .success.ab-btn--ghost:focus-visible {
  outline-offset: 2px;
  background-color: var(--ab-success-200);
}
.ab-btn--outline.success:focus i, .success.ab-btn--ghost:focus i, .ab-btn--outline.success:focus-visible i, .success.ab-btn--ghost:focus-visible i {
  color: var(--ab-success-700);
}
.ab-btn--outline.success:focus-visible, .success.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.secondary, .secondary.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  color: var(--ab-secondary);
  border-color: var(--ab-secondary);
}
.ab-btn--outline.secondary i, .secondary.ab-btn--ghost i {
  color: var(--ab-secondary);
}
.ab-btn--outline.secondary:hover, .secondary.ab-btn--ghost:hover {
  background-color: var(--ab-secondary-100);
}
.ab-btn--outline.secondary:active, .secondary.ab-btn--ghost:active {
  background-color: var(--ab-secondary-200);
  border-color: var(--ab-secondary-300);
  color: var(--ab-secondary-700);
}
.ab-btn--outline.secondary:active i, .secondary.ab-btn--ghost:active i {
  color: var(--ab-secondary-700);
}
.ab-btn--outline.secondary:focus, .secondary.ab-btn--ghost:focus, .ab-btn--outline.secondary:focus-visible, .secondary.ab-btn--ghost:focus-visible {
  color: var(--ab-secondary-700);
  background-color: var(--Text-btn-white);
  color: var(--ab-secondary-700);
}
.ab-btn--outline.secondary:focus-visible, .secondary.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.error, .error.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  border-color: var(--ab-error);
  color: var(--ab-error-700);
}
.ab-btn--outline.error i, .error.ab-btn--ghost i {
  color: var(--ab-error-700);
}
.ab-btn--outline.error:hover, .error.ab-btn--ghost:hover {
  background-color: var(--ab-error-100);
  color: var(--ab-error-700);
}
.ab-btn--outline.error:hover i, .error.ab-btn--ghost:hover i {
  color: var(--ab-error-700);
}
.ab-btn--outline.error:active, .error.ab-btn--ghost:active {
  background-color: var(--ab-error-200);
  border-color: var(--ab-error-300);
}
.ab-btn--outline.error:focus, .error.ab-btn--ghost:focus, .ab-btn--outline.error:focus-visible, .error.ab-btn--ghost:focus-visible {
  background-color: var(--ab-error-200);
  color: var(--ab-error-700);
}
.ab-btn--outline.error:focus i, .error.ab-btn--ghost:focus i, .ab-btn--outline.error:focus-visible i, .error.ab-btn--ghost:focus-visible i {
  color: var(--ab-error-700);
}
.ab-btn--outline.error:focus-visible, .error.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.neutral, .neutral.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  border-color: var(--ab-neutral-950);
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral i, .neutral.ab-btn--ghost i {
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:hover, .neutral.ab-btn--ghost:hover {
  background-color: var(--ab-neutral-100);
  border-color: var(--ab-neutral-950);
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:hover i, .neutral.ab-btn--ghost:hover i {
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:active, .neutral.ab-btn--ghost:active {
  background-color: var(--ab-neutral-200);
  border-color: var(--ab-neutral-300);
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:active i, .neutral.ab-btn--ghost:active i {
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:focus, .neutral.ab-btn--ghost:focus, .ab-btn--outline.neutral:focus-visible, .neutral.ab-btn--ghost:focus-visible {
  background-color: var(--ab-neutral-200);
  border-color: var(--ab-neutral-950);
  color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:focus i, .neutral.ab-btn--ghost:focus i, .ab-btn--outline.neutral:focus-visible i, .neutral.ab-btn--ghost:focus-visible i {
  border-color: var(--ab-neutral-950);
}
.ab-btn--outline.neutral:focus-visible, .neutral.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.default, .default.ab-btn--ghost {
  background-color: var(--Text-btn-white);
  border-color: var(--ab-neutral-300);
  color: var(--ab-black);
}
.ab-btn--outline.default i, .default.ab-btn--ghost i {
  color: var(--ab-black);
}
.ab-btn--outline.default:hover, .default.ab-btn--ghost:hover {
  background-color: var(--ab-neutral-100);
  border-color: var(--ab-neutral-300);
  color: var(--ab-black);
}
.ab-btn--outline.default:hover i, .default.ab-btn--ghost:hover i {
  color: var(--ab-black);
}
.ab-btn--outline.default:focus, .default.ab-btn--ghost:focus, .ab-btn--outline.default:focus-visible, .default.ab-btn--ghost:focus-visible {
  background-color: var(--ab-neutral-100);
  border-color: var(--ab-neutral-300);
  color: var(--ab-black);
}
.ab-btn--outline.default:focus i, .default.ab-btn--ghost:focus i, .ab-btn--outline.default:focus-visible i, .default.ab-btn--ghost:focus-visible i {
  color: var(--ab-black);
}
.ab-btn--outline.default:focus-visible, .default.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline.warning, .warning.ab-btn--ghost {
  background-color: var(--ab-white);
  border-color: var(--ab-warning-300);
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning i, .warning.ab-btn--ghost i {
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:hover, .warning.ab-btn--ghost:hover {
  background-color: var(--ab-warning-200);
  border-color: var(--ab-warning-300);
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:hover i, .warning.ab-btn--ghost:hover i {
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:active, .warning.ab-btn--ghost:active {
  background-color: var(--ab-warning-300);
  border-color: var(--ab-warning-400);
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:active i, .warning.ab-btn--ghost:active i {
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:focus, .warning.ab-btn--ghost:focus, .ab-btn--outline.warning:focus-visible, .warning.ab-btn--ghost:focus-visible {
  background-color: var(--ab-warning-300);
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:focus i, .warning.ab-btn--ghost:focus i, .ab-btn--outline.warning:focus-visible i, .warning.ab-btn--ghost:focus-visible i {
  color: var(--ab-warning-700);
}
.ab-btn--outline.warning:focus-visible, .warning.ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--outline:disabled, .ab-btn--ghost:disabled, .ab-btn--ghost.disabled:hover, .ab-btn--outline.disabled:hover, .ab-btn--outline:disabled:hover, .ab-btn--ghost:disabled:hover, .ab-btn--outline.disabled, .disabled.ab-btn--ghost {
  background: var(--ab-white);
  color: var(--ab-text-disabled);
  border-color: var(--ab-grey-300);
  cursor: not-allowed;
  pointer-events: none;
}
.ab-btn--outline:disabled i, .ab-btn--ghost:disabled i, .ab-btn--ghost.disabled:hover i, .ab-btn--outline:disabled:hover i, .ab-btn--ghost:disabled:hover i, .ab-btn--outline.disabled:hover i, .ab-btn--outline.disabled i, .disabled.ab-btn--ghost i {
  color: var(--ab-text-disabled);
}
.ab-btn--ghost {
  background-color: transparent;
  border-color: transparent !important;
}
.ab-btn--ghost.primary {
  background-color: transparent;
  color: var(--ab-primary);
}
.ab-btn--ghost.primary i {
  color: var(--ab-primary);
}
.ab-btn--ghost.primary:hover {
  background-color: var(--ab-primary-100);
  color: var(--ab-primary-700);
}
.ab-btn--ghost.primary:hover i {
  color: var(--ab-primary-700);
}
.ab-btn--ghost.primary:active {
  background-color: var(--ab-primary-200);
  color: var(--ab-primary-700);
}
.ab-btn--ghost.primary:active i {
  color: var(--ab-primary-700);
}
.ab-btn--ghost.primary:focus, .ab-btn--ghost.primary:focus-visible {
  background-color: transparent;
  color: var(--ab-primary);
}
.ab-btn--ghost.primary:focus i, .ab-btn--ghost.primary:focus-visible i {
  color: var(--ab-primary);
}
.ab-btn--ghost.primary:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost.neutral {
  background-color: transparent;
  color: var(--ab-neutral-950);
}
.ab-btn--ghost.neutral i {
  color: var(--ab-neutral-950);
}
.ab-btn--ghost.neutral:hover {
  background-color: var(--ab-neutral-100);
  color: var(--ab-neutral-950);
}
.ab-btn--ghost.neutral:hover i {
  color: var(--ab-neutral-950);
}
.ab-btn--ghost.neutral:focus, .ab-btn--ghost.neutral:focus-visible {
  background-color: transparent;
  color: var(--ab-neutral-950);
}
.ab-btn--ghost.neutral:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost.default {
  background-color: transparent;
  color: var(--ab-black);
}
.ab-btn--ghost.default i {
  color: var(--ab-black);
}
.ab-btn--ghost.default:hover {
  background-color: var(--ab-neutral-100);
  color: var(--ab-black);
}
.ab-btn--ghost.default:hover i {
  color: var(--ab-black);
}
.ab-btn--ghost.default:focus, .ab-btn--ghost.default:focus-visible {
  background-color: transparent;
  color: var(--ab-black);
}
.ab-btn--ghost.default:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost.secondary {
  background-color: transparent;
  color: var(--ab-secondary);
}
.ab-btn--ghost.secondary i {
  color: var(--ab-secondary);
}
.ab-btn--ghost.secondary:hover {
  background-color: var(--ab-secondary-100);
  color: var(--ab-secondary);
}
.ab-btn--ghost.secondary:hover i {
  color: var(--ab-secondary);
}
.ab-btn--ghost.secondary:focus, .ab-btn--ghost.secondary:focus-visible {
  background-color: transparent;
  color: var(--ab-secondary);
}
.ab-btn--ghost.secondary:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost.error {
  background-color: transparent;
  color: var(--ab-error-700);
}
.ab-btn--ghost.error i {
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:hover {
  background-color: var(--ab-error-200);
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:hover i {
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:active {
  background-color: transparent;
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:active i {
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:focus, .ab-btn--ghost.error:focus-visible {
  background-color: transparent;
  color: var(--ab-error-700);
}
.ab-btn--ghost.error:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost.warning {
  background-color: transparent;
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning i {
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:hover {
  background-color: var(--ab-warning-200);
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:hover i {
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:active {
  background-color: transparent;
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:active i {
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:focus, .ab-btn--ghost.warning:focus-visible {
  background-color: transparent;
  color: var(--ab-warning-700);
}
.ab-btn--ghost.warning:focus-visible {
  outline: 2px solid var(--ab-black);
}
.ab-btn--ghost:disabled, .ab-btn--ghost.disabled:hover, .ab-btn--ghost:disabled:hover, .ab-btn--ghost.disabled {
  background: var(--ab-white);
  color: var(--ab-text-disabled);
  border-color: var(--ab-grey-300);
  cursor: not-allowed;
  pointer-events: none;
}
.ab-btn--ghost:disabled i, .ab-btn--ghost:disabled:hover i, .ab-btn--ghost.disabled:hover i, .ab-btn--ghost.disabled i {
  color: var(--ab-text-disabled);
}
.ab-btn--link {
  padding: 0;
  text-decoration-style: solid;
}
.ab-btn--link.underline {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.ab-btn--link.underline:hover, .ab-btn--link.underline:focus, .ab-btn--link.underline:focus-visible {
  text-decoration: underline;
}
.ab-btn--link.neutral {
  background-color: transparent;
  color: var(--ab-neutral-950);
}
.ab-btn--link.neutral i {
  color: var(--ab-neutral-950);
}
.ab-btn--link.neutral:hover, .ab-btn--link.neutral:focus, .ab-btn--link.neutral:focus-visible {
  color: var(--ab-neutral-950);
}
.ab-btn--link.neutral:hover i, .ab-btn--link.neutral:focus i, .ab-btn--link.neutral:focus-visible i {
  color: var(--ab-neutral-950);
}
.ab-btn--link.default {
  background-color: transparent;
  color: var(--ab-black);
}
.ab-btn--link.default i {
  color: var(--ab-black);
}
.ab-btn--link.default:hover, .ab-btn--link.default:focus, .ab-btn--link.default:focus-visible {
  color: var(--ab-black);
}
.ab-btn--link.default:hover i, .ab-btn--link.default:focus i, .ab-btn--link.default:focus-visible i {
  color: var(--ab-black);
}
.ab-btn--link:hover {
  text-decoration: underline;
  background-color: transparent !important;
}
.ab-btn--link:focus, .ab-btn--link:focus-visible {
  text-decoration: underline;
  background-color: transparent !important;
  outline: none !important;
}
.ab-btn--link.primary {
  background-color: transparent;
  color: var(--ab-primary);
  font-weight: 700;
}
.ab-btn--link.primary i {
  color: var(--ab-primary);
  text-decoration: none;
}
.ab-btn--link.primary:hover i {
  color: var(--ab-primary-dark);
}
.ab-btn--link.primary:focus, .ab-btn--link.primary:focus-visible {
  color: var(--ab-primary);
}
.ab-btn--link.primary:focus i, .ab-btn--link.primary:focus-visible i {
  color: var(--ab-primary);
}
.ab-btn--link.secondary {
  background-color: transparent;
  color: var(--ab-primary);
}
.ab-btn--link.secondary i {
  color: var(--ab-primary);
}
.ab-btn--link.secondary:hover i {
  color: var(--ab-primary-dark);
}
.ab-btn--link.secondary:focus, .ab-btn--link.secondary:focus-visible {
  color: var(--ab-primary);
}
.ab-btn--link.secondary:focus i, .ab-btn--link.secondary:focus-visible i {
  color: var(--ab-primary);
}
.ab-btn--link.error {
  background-color: transparent;
  color: var(--ab-system-error-dark);
}
.ab-btn--link.error i {
  color: var(--ab-system-error-dark);
}
.ab-btn--link.error:hover {
  background-color: var(--ab-system-error-dark-100);
  color: var(--ab-system-error-dark-dark);
}
.ab-btn--link.error:hover i {
  color: var(--ab-system-error-dark-dark);
}
.ab-btn--link.error:focus, .ab-btn--link.error:focus-visible {
  outline: 2px solid var(--ab-system-error-dark-dark);
  outline-offset: 2px;
  background-color: transparent;
  color: var(--ab-system-error-dark);
}
.ab-btn--link.error:focus i, .ab-btn--link.error:focus-visible i {
  color: var(--ab-system-error-dark);
}
.ab-btn--link:disabled, .ab-btn--link:disabled:hover, .ab-btn--link.disabled:hover, .ab-btn--link.disabled {
  background: var(--ab-white);
  color: var(--ab-text-disabled);
  border-color: var(--ab-grey-300);
  cursor: not-allowed;
  pointer-events: none;
}
.ab-btn--link:disabled i, .ab-btn--link:disabled:hover i, .ab-btn--link.disabled:hover i, .ab-btn--link.disabled i {
  color: var(--ab-text-disabled);
}
.ab-btn i, .ab-btn--transparent i, .ab-btn--solid i, .ab-btn--outline i, .ab-btn--ghost i {
  font-weight: 400;
  font-family: "remixicon";
}
.ab-btn:hover, .ab-btn--transparent:hover, .ab-btn--solid:hover, .ab-btn--outline:hover, .ab-btn--ghost:hover {
  background-color: var(--ab-primary-100);
  border-color: var(--ab-primary);
  cursor: pointer;
}
.ab-btn:focus, .ab-btn--transparent:focus, .ab-btn--solid:focus, .ab-btn--outline:focus, .ab-btn--ghost:focus, .ab-btn:focus-visible, .ab-btn--transparent:focus-visible, .ab-btn--solid:focus-visible, .ab-btn--outline:focus-visible, .ab-btn--ghost:focus-visible {
  outline: 2px solid var(--ab-primary-dark);
  outline-offset: 2px;
}
.ab-btn--transparent {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--ab-black);
}
.ab-btn--transparent i,
.ab-btn--transparent svg {
  color: inherit;
}
.ab-btn--transparent:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--ab-primary-700);
}
.ab-btn--transparent:active, .ab-btn--transparent.active {
  background-color: transparent;
  border-color: transparent;
  color: var(--ab-primary-900);
}
.ab-btn--transparent:focus, .ab-btn--transparent:focus-visible {
  background-color: transparent;
  color: var(--ab-black);
  outline: 2px solid var(--ab-black);
  outline-offset: 0;
}
.ab-btn--transparent:disabled, .ab-btn--transparent:disabled:hover, .ab-btn--transparent.disabled:hover, .ab-btn--transparent.disabled {
  background-color: transparent;
  border-color: transparent;
  color: var(--ab-neutral-400);
}
.ab-btn--transparent:disabled:hover, .ab-btn--transparent.disabled:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--ab-neutral-400);
}
.ab-btn.md, .md.ab-btn--solid, .md.ab-btn--outline, .md.ab-btn--ghost, .md.ab-btn--transparent {
  padding: 0 0.75rem;
  font-size: 0.875rem;
  height: 2rem;
}
.ab-btn.sm, .sm.ab-btn--solid, .sm.ab-btn--outline, .sm.ab-btn--ghost, .sm.ab-btn--transparent {
  padding: 0rem 0.5rem;
  font-size: 0.75rem;
  height: 1.5rem;
  border-radius: 0.25rem;
}
.ab-btn.lg, .lg.ab-btn--solid, .lg.ab-btn--outline, .lg.ab-btn--ghost, .lg.ab-btn--transparent {
  height: 2.5rem;
  padding: 0rem 1rem;
}
.ab-btn.square, .square.ab-btn--solid, .square.ab-btn--outline, .square.ab-btn--ghost, .square.ab-btn--transparent {
  border-radius: 0;
}
.ab-btn.circle, .circle.ab-btn--solid, .circle.ab-btn--outline, .circle.ab-btn--ghost, .circle.ab-btn--transparent {
  border-radius: 2.5rem;
}
.ab-btn.w-full, .w-full.ab-btn--solid, .w-full.ab-btn--outline, .w-full.ab-btn--ghost, .w-full.ab-btn--transparent {
  width: 100%;
}
@media all and (max-width: 768px) {
  .ab-btn.arrow > span, .arrow.ab-btn--solid > span, .arrow.ab-btn--outline > span, .arrow.ab-btn--ghost > span, .arrow.ab-btn--transparent > span {
    margin-left: auto;
    margin-right: 0;
  }
}
@media all and (max-width: 768px) {
  .rtl .ab-btn.arrow > span, .rtl .arrow.ab-btn--solid > span, .rtl .arrow.ab-btn--outline > span, .rtl .arrow.ab-btn--ghost > span, .rtl .arrow.ab-btn--transparent > span {
    margin-right: auto;
    margin-left: 0;
  }
}
.ab-btn.arrow::after, .arrow.ab-btn--solid::after, .arrow.ab-btn--outline::after, .arrow.ab-btn--ghost::after, .arrow.ab-btn--transparent::after {
  content: "\ea6c";
  display: inline-block;
  font-family: "remixicon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  margin-left: 1rem;
  margin-right: 0;
}
@media all and (max-width: 768px) {
  .ab-btn.arrow::after, .arrow.ab-btn--solid::after, .arrow.ab-btn--outline::after, .arrow.ab-btn--ghost::after, .arrow.ab-btn--transparent::after {
    margin-left: auto;
    position: relative;
    left: -1rem;
  }
}
.rtl .ab-btn.arrow::after, .rtl .arrow.ab-btn--solid::after, .rtl .arrow.ab-btn--outline::after, .rtl .arrow.ab-btn--ghost::after, .rtl .arrow.ab-btn--transparent::after {
  margin-left: 0px;
  margin-right: 1rem;
}
@media all and (max-width: 768px) {
  .rtl .ab-btn.arrow::after, .rtl .arrow.ab-btn--solid::after, .rtl .arrow.ab-btn--outline::after, .rtl .arrow.ab-btn--ghost::after, .rtl .arrow.ab-btn--transparent::after {
    position: relative;
    margin-right: auto;
    left: 3rem;
  }
}
.rtl .ab-btn.arrow::after, .rtl .arrow.ab-btn--solid::after, .rtl .arrow.ab-btn--outline::after, .rtl .arrow.ab-btn--ghost::after, .rtl .arrow.ab-btn--transparent::after {
  transform: translateX(-10px);
  content: "\ea60";
}

/*
  * RTL direction styles
  */
[dir=ltr] .ab-btn i, [dir=ltr] .ab-btn--solid i, [dir=ltr] .ab-btn--outline i, [dir=ltr] .ab-btn--ghost i, [dir=ltr] .ab-btn--transparent i,
[dir=""] .ab-btn i,
[dir=""] .ab-btn--solid i,
[dir=""] .ab-btn--outline i,
[dir=""] .ab-btn--ghost i,
[dir=""] .ab-btn--transparent i,
[lang=en] .ab-btn i,
[lang=en] .ab-btn--solid i,
[lang=en] .ab-btn--outline i,
[lang=en] .ab-btn--ghost i,
[lang=en] .ab-btn--transparent i {
  transform: rotateY(180deg);
}

.ab-sort-btn {
  padding-inline: 1rem;
  padding-block: 0.7rem;
}
.ab-sort-btn:hover {
  background-color: var(--colors-primary-primary-500);
  border-color: var(--ab-primary) !important;
}
.ab-sort-btn.asc .up-arrow {
  display: none;
}
.ab-sort-btn.asc .down-arrow {
  stroke: var(--ab-primary);
}
.ab-sort-btn.desc .down-arrow {
  display: none;
}
.ab-sort-btn.desc .up-arrow {
  stroke: var(--ab-primary);
}
@media all and (max-width: 391px) {
  .ab-sort-btn {
    width: 80%;
    padding-inline: 0.7rem;
  }
  .ab-sort-btn p {
    font-size: 0.8rem;
  }
}