/* [project]/gic_frontend_next/src/components/ui/buttons.module.css [app-client] (css) */
.buttons-module__WOX3eG__primaryAction {
  --mechanical-edge-color: color-mix(in srgb,
    var(--foreground-100) 78%,
    var(--background-l100-100) 22%);
  background: var(--button-background, var(--background-button-inverse-pill));
  border: var(--button-border, .75px solid #00000080);
  box-shadow: var(--action-button-shadow, var(--shadow-button-inverse-pill));
  color: var(--foreground-inverse-70);
  text-shadow: var(--text-shadow-button-inverse);
}

.buttons-module__WOX3eG__controlSurface {
  --mechanical-edge-color: color-mix(in srgb,
    var(--background-l100-100) 68%,
    var(--foreground-100) 32%);
  background: var(--background-l150-100);
  border: .25px solid var(--foreground-10);
  box-shadow: var(--action-button-shadow, var(--shadow-outset-005));
}

.buttons-module__WOX3eG__controlSurface:not(:disabled):hover {
  background: var(--background-l100-100);
}

.buttons-module__WOX3eG__menuSurface {
  --mechanical-edge-color: color-mix(in srgb,
    var(--background-l100-100) 82%,
    var(--foreground-100) 18%);
  background: var(--background-l100-100);
  box-shadow: var(--action-button-shadow, var(--shadow-outset-100));
}

.buttons-module__WOX3eG__ghostedAction {
  --mechanical-edge-color: var(--foreground-20);
  box-shadow: none;
  text-shadow: none;
  background: none;
  border: 1px solid #0000;
}

.buttons-module__WOX3eG__ghostedAction:not(:disabled):hover {
  background: var(--foreground-3);
  box-shadow: none;
  color: var(--foreground-100);
  border-color: #0000;
}

.buttons-module__WOX3eG__ghostedAction[aria-pressed="true"] {
  background: var(--foreground-5);
  border-color: var(--foreground-5);
  box-shadow: none;
}

.buttons-module__WOX3eG__ghostedAction[data-active-surface="container"][aria-pressed="true"] {
  background: none;
  border-color: #0000;
}

.buttons-module__WOX3eG__dangerControlSurface {
  background: var(--foreground-3);
  color: #e1302c;
}

.buttons-module__WOX3eG__dangerControlSurface:hover {
  background: var(--foreground-5);
  color: #e1302c;
}

.buttons-module__WOX3eG__dangerControlSurface svg {
  color: currentColor;
}

.buttons-module__WOX3eG__elevation000 {
  --action-button-shadow: none;
}

.buttons-module__WOX3eG__elevation005 {
  --action-button-shadow: var(--shadow-outset-005);
}

.buttons-module__WOX3eG__elevation025 {
  --action-button-shadow: var(--shadow-outset-025);
}

.buttons-module__WOX3eG__elevation005:not(:disabled):hover, .buttons-module__WOX3eG__elevation025:not(:disabled):hover, .buttons-module__WOX3eG__elevation100:not(:disabled):hover {
  --action-button-shadow: none;
}

.buttons-module__WOX3eG__primaryAction.buttons-module__WOX3eG__elevation025 {
  --action-button-shadow: var(--shadow-button-inverse-pill);
}

.buttons-module__WOX3eG__elevation100 {
  --action-button-shadow: var(--shadow-outset-100);
}

.buttons-module__WOX3eG__primaryAction.buttons-module__WOX3eG__elevation100 {
  --action-button-shadow: var(--shadow-button-special-md);
  background: var(--button-background, linear-gradient(0deg, var(--foreground-10) 0%, var(--foreground-10) 100%),
    linear-gradient(180deg, var(--background-inverse-100) 0%, var(--foreground-100) 100%));
  border: var(--button-border, 1px solid var(--foreground-80));
  color: var(--foreground-inverse-90);
}

.buttons-module__WOX3eG__mechanicalWrapper {
  background: #00000003;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  width: fit-content;
  display: inline-flex;
  position: relative;
}

.buttons-module__WOX3eG__mechanicalWrapperFullWidth {
  width: 100%;
}

.buttons-module__WOX3eG__mechanicalWrapperSm {
  border-radius: 5px;
  padding: 2px 2px 4px;
}

.buttons-module__WOX3eG__mechanicalWrapperMd {
  border-radius: 6px;
  padding: 3px 3px 5px;
}

.buttons-module__WOX3eG__mechanicalWrapperLg {
  border-radius: 8px;
  padding: 4px 4px 6px;
}

.buttons-module__WOX3eG__mechanicalButton {
  cursor: pointer;
  will-change: transform;
  backface-visibility: hidden;
  transition: box-shadow .1s ease-out, transform .1s ease-out;
  position: relative;
  overflow: hidden;
  transform: translateY(1px);
}

.buttons-module__WOX3eG__mechanicalButton:not(:disabled):hover, .buttons-module__WOX3eG__mechanicalButton:not(:disabled):active {
  transform: translateY(2px);
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalSm {
  box-shadow: 0 2px 0 0 var(--mechanical-edge-color),
    -15px 18px 7px 0 #00000003,
    -10px 12px 6px 0 #0000000a,
    -5px 7px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
  border-radius: 5px;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalSm:not(:disabled):hover, .buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalSm:not(:disabled):active {
  box-shadow: 0 1px 0 0 var(--mechanical-edge-color),
    -15px 18px 7px 0 #00000003,
    -10px 12px 6px 0 #0000000a,
    -5px 7px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalMd {
  box-shadow: 0 2.5px 0 0 var(--mechanical-edge-color),
    -16px 20px 8px 0 #00000003,
    -11px 13px 7px 0 #0000000a,
    -5px 8px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
  border-radius: 6px;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalMd:not(:disabled):hover, .buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalMd:not(:disabled):active {
  box-shadow: 0 1.5px 0 0 var(--mechanical-edge-color),
    -16px 20px 8px 0 #00000003,
    -11px 13px 7px 0 #0000000a,
    -5px 8px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalLg {
  box-shadow: 0 3px 0 0 var(--mechanical-edge-color),
    -18px 22px 9px 0 #00000003,
    -12px 15px 8px 0 #0000000a,
    -6px 9px 6px 0 #00000026,
    -3px 4px 5px 0 #00000042,
    -1px 2px 3px 0 #0000004a;
  border-radius: 8px;
  transform: translateY(2px);
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalLg:not(:disabled):hover, .buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalLg:not(:disabled):active {
  box-shadow: 0 2px 0 0 var(--mechanical-edge-color),
    -18px 22px 9px 0 #00000003,
    -12px 15px 8px 0 #0000000a,
    -6px 9px 6px 0 #00000026,
    -3px 4px 5px 0 #00000042,
    -1px 2px 3px 0 #0000004a;
  transform: translateY(3px);
}

.buttons-module__WOX3eG__mechanicalButton:disabled {
  cursor: not-allowed;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalSm:disabled:hover {
  box-shadow: 0 2px 0 0 var(--mechanical-edge-color),
    -15px 18px 7px 0 #00000003,
    -10px 12px 6px 0 #0000000a,
    -5px 7px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalMd:disabled:hover {
  box-shadow: 0 2.5px 0 0 var(--mechanical-edge-color),
    -16px 20px 8px 0 #00000003,
    -11px 13px 7px 0 #0000000a,
    -5px 8px 5px 0 #00000026,
    -2px 3px 4px 0 #00000042,
    -1px 1px 2px 0 #0000004a;
}

.buttons-module__WOX3eG__mechanicalButton.buttons-module__WOX3eG__mechanicalLg:disabled:hover {
  box-shadow: 0 3px 0 0 var(--mechanical-edge-color),
    -18px 22px 9px 0 #00000003,
    -12px 15px 8px 0 #0000000a,
    -6px 9px 6px 0 #00000026,
    -3px 4px 5px 0 #00000042,
    -1px 2px 3px 0 #0000004a;
}

.buttons-module__WOX3eG__mechanicalHighlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 1px #fff3, inset 0 -.5px #ffffff1a;
}

.buttons-module__WOX3eG__mechanicalMd .buttons-module__WOX3eG__mechanicalHighlight {
  box-shadow: inset 0 1.25px #fff3, inset 0 -.75px #ffffff1a;
}

.buttons-module__WOX3eG__mechanicalLg .buttons-module__WOX3eG__mechanicalHighlight {
  box-shadow: inset 0 1.5px #fff3, inset 0 -1px #ffffff1a;
}

.buttons-module__WOX3eG__primaryAction.buttons-module__WOX3eG__elevation100:disabled {
  box-shadow: none;
  opacity: .3;
}

.dark .buttons-module__WOX3eG__primaryAction {
  --mechanical-edge-color: color-mix(in srgb,
    var(--background-inverse-100) 64%,
    var(--foreground-inverse-100) 36%);
  border: .5px solid #0003;
}

.dark .buttons-module__WOX3eG__primaryAction.buttons-module__WOX3eG__elevation100 {
  background: var(--button-background, linear-gradient(0deg, #00000005 0%, #00000005 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--background-inverse-100) 82%, var(--white-100)) 0%,
      color-mix(in srgb, var(--background-inverse-100) 96%, var(--foreground-inverse-100)) 100%));
  border: var(--button-border, 1px solid var(--foreground-inverse-10));
  color: var(--foreground-inverse-90);
}

.dark .buttons-module__WOX3eG__controlSurface {
  background: var(--background-l150-100);
  border: .25px solid var(--foreground-10);
}

.dark .buttons-module__WOX3eG__controlSurface:not(:disabled):hover {
  background: var(--background-l100-100);
}

.dark .buttons-module__WOX3eG__menuSurface {
  background: var(--background-l100-100);
}

.dark .buttons-module__WOX3eG__ghostedAction {
  background: none;
  border-color: #0000;
}

.dark .buttons-module__WOX3eG__ghostedAction:not(:disabled):hover {
  background: var(--foreground-3);
  color: var(--foreground-100);
  border-color: #0000;
}

.dark .buttons-module__WOX3eG__ghostedAction[aria-pressed="true"] {
  background: var(--foreground-3);
  border-color: var(--foreground-3);
}

.dark .buttons-module__WOX3eG__ghostedAction[data-active-surface="container"][aria-pressed="true"] {
  background: none;
  border-color: #0000;
}

.buttons-module__WOX3eG__buttonIcon {
  flex-shrink: 0;
  place-items: center;
  line-height: 0;
  display: grid;
}

.buttons-module__WOX3eG__buttonIcon > svg {
  display: block;
}

.dark .buttons-module__WOX3eG__dangerControlSurface {
  color: #fd6663;
}

.dark .buttons-module__WOX3eG__dangerControlSurface:hover {
  color: #fd6663;
}