@import url('@gouvfr-lasuite/cunningham-react/icons');
@import url('@gouvfr-lasuite/cunningham-react/style');
@import url('@gouvfr-lasuite/cunningham-react/fonts');
@import url('./cunningham-tokens.css');
@import url('./cunningham-custom-tokens.css');
@import url('../assets/fonts/Marianne/Marianne-font.css');

.c__input,
.c__field,
.c__select,
.c__datagrid {
  font-family: var(--c--globals--font--families--base);
}

.c__field {
  line-height: initial;
  width: 100%;
}

.c__field .c__field__footer {
  padding: 2px 0 0;
  font-size: var(--c--components--forms-field--footer-font-size);
  color: var(--c--components--forms-field--footer-color);
}

.labelled-box label {
  color: var(--c--contextuals--content--semantic--neutral--primary);
  top: 1px;
}

.labelled-box--disabled label {
  color: var(--c--contextuals--content--semantic--neutral--tertiary);
}

.labelled-box label.placeholder {
  top: 11px;
}

.c__field :not(.c__textarea__wrapper, div) .labelled-box label.placeholder {
  top: 50%;
  transform: translateY(-50%);
}

/**
 * Input
 * TextArea
*/
.c__input__wrapper,
.c__textarea__wrapper {
  width: 100%;
  transition: all var(--c--globals--transitions--duration)
    var(--c--globals--transitions--ease-out);
  gap: 0.5rem;
  color: var(--c--globals--colors--gray-600);
}

@media screen and (width <= 768px) {
  .c__input__wrapper__mobile {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

.c__input__wrapper {
  height: 46px;
}

.c__input__wrapper .c__input {
  position: absolute;
  top: 16px;
}

.c__input__wrapper:has(input[readonly]),
.c__input__wrapper:has(input[readonly]) * {
  cursor: default;
}

.c__textarea__wrapper:has(input.border-none),
.c__textarea__wrapper:has(input.border-none) *,
.c__input__wrapper:has(input.border-none),
.c__input__wrapper:has(input.border-none) * {
  border: none;
}

.c__input__wrapper .labelled-box__label.placeholder {
  cursor: inherit;
}

.c__input__wrapper .c__input,
.c__textarea__wrapper .c__textarea {
  width: 100%;
}

.c__input__wrapper--disabled .c__input {
  color: var(--c--contextuals--content--semantic--neutral--tertiary);
}

.c__input__wrapper--error .c__input {
  color: var(--c--components--forms-input--color--error);
}

.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover {
  border-color: var(--c--components--forms-input--border--color-error-hover);
  color: var(--c--components--forms-input--color--error-hover);
}

.c__input__wrapper--error:hover {
  box-shadow: var(--c--components--forms-input--color--box-shadow-error-hover) 0
    0 0 2px;
}

.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label {
  color: var(--c--components--forms-input--border--color-error-hover);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 0s 600000s,
    color 0s 600000s;
}

.c__textarea__wrapper .c__textarea {
  color: var(--c--components--forms-textarea--color);
}

.c__textarea__wrapper:hover {
  border-color: var(--c--components--forms-textarea--border-color-hover);
}

.c__textarea__wrapper--disabled:hover {
  border-color: var(
    --c--components--forms-textarea--disabled--border-color-hover
  );
}

/**
 * Select
*/
.c_select__no_border .c__select .c__select__wrapper,
.c_select__no_border .c__select .c__select__wrapper:hover,
.c_select__no_border
  .c__select:not(.c__select--disabled)
  .c__select__wrapper:hover {
  border: none;
  box-shadow: none;
}

.c__select__wrapper {
  transition: all var(--c--globals--transitions--duration)
    var(--c--globals--transitions--ease-out);
  min-height: var(--c--components--forms-select--height);
  height: auto;
}

.c__select:not(.c__select--disabled) .c__select__wrapper:hover {
  box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
}

.c__select__wrapper:hover {
  border-radius: var(--c--components--forms-select--border-radius-hover);
  border-color: var(--c--components--forms-select--border-color-hover);
}

.c__select--disabled .c__select__wrapper:hover {
  border-color: var(--c--components--forms-select--border-color-disabled-hover);
}

.c__select--disabled .c__select__wrapper label,
.c__select--disabled .c__select__wrapper input,
.c__select--disabled .c__select__wrapper {
  cursor: not-allowed;
}

.c__select__menu__item {
  transition: all var(--c--globals--transitions--duration)
    var(--c--globals--transitions--ease-out);
}

.c__select--disabled .c__select__wrapper label,
.c__select--disabled .c__select__wrapper input,
.c_select__no_bg .c__select__wrapper {
  background: none;
}

.c__select__wrapper:focus-within .labelled-box--disabled label {
  color: var(--c--components--forms-labelledbox--label-color--small-disabled);
}

.c__select__wrapper .labelled-box {
  display: flex;
  gap: 0.6rem;
  flex-direction: column;
  align-items: flex-start;
}

.c__select__wrapper .labelled-box .labelled-box__children {
  padding: unset;
  padding-right: 5rem;
}

.c__select__wrapper .labelled-box .c__select__inner__actions {
  right: 0;
  top: 50%;
  position: absolute;
}

.c__select__wrapper label {
  position: relative;
  padding-right: 5rem;
  max-width: none;
}

.c__select__wrapper .c__select__inner__actions__open:focus {
  outline: none;
}

.c__select__wrapper .labelled-box__label.c__offscreen {
  display: none;
}

/**
 * DataGrid
*/
.c__datagrid__table__container {
  overflow: auto;
}

.c__datagrid__table__container > table th .c__datagrid__header {
  color: var(--c--components--datagrid--header--color);
  font-weight: var(--c--components--datagrid--header--weight);
  font-size: var(--c--components--datagrid--header--size);
  text-transform: none;
  letter-spacing: 0;
  padding-block: 11px;
  text-align: left;
}

.c__datagrid__table__container > table tbody tr {
  border: none;
  border-top: 1px solid var(--c--contextuals--border--surface--primary);
  border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
}

.c__datagrid__table__container > table tbody tr:hover {
  background-color: var(--c--contextuals--background--surface--secondary);
}

.c__datagrid__table__container > table tbody {
  background-color: var(--c--components--datagrid--body--background-color);
  color: var(--c--globals--colors--gray-900);
}

.c__datagrid__table__container > table {
  table-layout: auto;
}

.c__datagrid__table__container > table td {
  white-space: break-spaces;
  height: 65px;
}

.c__datagrid__table__container > table th:first-child,
.c__datagrid__table__container > table td:first-child {
  padding-left: 15px;
}

.c__datagrid__table__container > table tr:last-child {
  border: none;
}

.c__datagrid > .c__pagination {
  padding-inline: 1rem;
  justify-content: flex-end;
}

.c__pagination__list {
  gap: 3px;
  border-radius: 4px;
  background: var(--c--components--datagrid--pagination--background-color);
  border-color: var(--c--components--datagrid--pagination--border-color);
}

.c__pagination__list .c__button--tertiary-text.c__button--active {
  background-color: var(
    --c--components--datagrid--pagination--background-color-active
  );
  color: var(--c--globals--colors--gray-800);
}

.c__pagination__list .c__button--tertiary-text:disabled {
  display: none;
}

@media screen and (width <= 380px) {
  .c__datagrid > .c__pagination {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/**
 * Date picker
*/
.c__popover.c__popover--borderless {
  z-index: 3;
}

.c__date-picker__wrapper {
  transition: all var(--c--globals--transitions--duration)
    var(--c--globals--transitions--ease-out);
}

.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
  box-shadow: var(--c--globals--colors--primary-500) 0 0 0 2px;
}

.c__date-picker.c__date-picker--invalid:not(.c__date-picker--disabled):hover
  .c__date-picker__wrapper {
  box-shadow: var(--c--globals--colors--danger-300) 0 0 0 2px;
}

.c__date-picker__wrapper button[aria-label='Clear date'],
.c__date-picker.c__date-picker--invalid .c__date-picker__wrapper * {
  color: var(--c--globals--colors--danger-300);
}

/**
 * Others
*/
.c__checkbox:focus-within {
  border-color: transparent;
  background-color: transparent;
}

.c__checkbox {
  transition: all 0.8s ease-in-out;
}

.c__checkbox .c__field__text {
  color: var(--c--components--forms-checkbox--text--color);
  font-size: var(--c--components--forms-checkbox--text--size);
}

.c__checkbox.c__checkbox--disabled .c__field__text {
  color: var(--c--globals--colors--gray-600);
}

.c__switch.c__checkbox--disabled .c__switch__rail {
  cursor: not-allowed;
}

.c__checkbox.c__checkbox--disabled .c__checkbox__label {
  color: var(--c--globals--colors--gray-400);
}

.c__radio input::before {
  box-shadow: inset 1em 1em var(--c--globals--colors--primary-600);
}

/**
 * Button primary
*/
.c__button--primary {
  background-color: var(--c--components--button--primary--background--color);
  color: var(--c--components--button--primary--color);
}

.c__button--primary:hover {
  background-color: var(
    --c--components--button--primary--background--color-hover
  );
  color: var(--c--components--button--primary--color-hover);
}

.c__button--primary:focus-visible {
  color: var(--c--components--button--primary--color-focus-visible);
}

.c__button--primary:active,
.c__button--primary.c__button--active {
  background-color: var(
    --c--components--button--primary--background--color-active
  );
  color: var(--c--components--button--primary--color-active);
  border-color: var(--c--components--button--primary--border--color-active);
}

/**
 * Button secondary
*/
.c__button--secondary {
  background-color: var(--c--components--button--secondary--background--color);
  color: var(--c--components--button--secondary--color);
  border: 1px solid var(--c--components--button--secondary--border--color);
}

.c__button--secondary:hover {
  background-color: var(
    --c--components--button--secondary--background--color-hover
  );
  color: var(--c--components--button--secondary--color-hover);
  border: 1px solid var(--c--components--button--secondary--border--color-hover);
}

.c__button--secondary:focus-visible {
  background-color: var(
    --c--components--button--secondary--background--color-focus-visible
  );
}

/**
 * Button primary-text
*/
.c__button--primary-text {
  color: var(--c--components--button--primary-text--color) !important;
}

.c__button--primary-text:hover {
  background-color: var(
    --c--components--button--primary-text--background--color-hover
  );
}

.c__button--primary-text:active,
.c__button--primary-text.c__button--active {
  border: 1px solid transparent;
}

.c__button--primary-text:focus-visible {
  background-color: var(
    --c--components--button--primary-text--background--color-focus-visible
  );
}

.c__button--primary-text:disabled {
  border: 1px solid transparent;
  background-color: var(
    --c--components--button--primary-text--background--disabled
  );
  color: var(--c--components--button--primary-text--disabled) !important;
}

/** 
 * Button Tertiary
*/
.c__button--tertiary {
  background-color: var(--c--components--button--tertiary--background--color);
  color: var(--c--components--button--tertiary--color);
}

.c__button--tertiary:hover {
  background-color: var(
    --c--components--button--tertiary--background--color-hover
  );
  color: var(--c--components--button--tertiary--color);
}

.c__button--tertiary:focus-visible {
  background-color: var(
    --c--components--button--tertiary--background--color-focus-visible
  );
  color: var(--c--components--button--tertiary--color);
}

.c__button--tertiary:active {
  background-color: var(
    --c--components--button--tertiary--background--color-active
  );
  border: 1px solid transparent;
  color: var(--c--components--button--tertiary--color);
}

.c__button--tertiary:disabled {
  background-color: var(
    --c--components--button--tertiary--background--disabled
  );
  color: var(--c--components--button--tertiary--disabled);
}

.c__button--tertiary-text {
  border: none;
  color: var(--c--components--button--tertiary-text--color);
}

.c__button--tertiary-text:hover,
.c__button--tertiary-text:focus-visible {
  background-color: var(
    --c--components--button--tertiary-text--background--color-hover
  );
  color: var(--c--components--button--tertiary-text--color-hover);
}

.c__button--tertiary-text:disabled {
  background-color: var(
    --c--components--button--tertiary-text--background--color-disabled
  );
  color: var(--c--components--button--tertiary-text--color-disabled);
}

/**
 * Button Danger
*/
.c__button--danger {
  background-color: var(--c--components--button--danger--background--color);
}

.c__button--danger:hover {
  background-color: var(
    --c--components--button--danger--background--color-hover
  );
  color: var(--c--components--button--danger--color-hover);
}

.c__button--danger:focus-visible {
  background-color: var(
    --c--components--button--danger--background--color-focus-visible
  );
  color: var(--c--components--button--danger--color-hover);
}

.c__button--danger:disabled {
  background-color: var(
    --c--components--button--danger--background--color-disabled
  );
  color: var(--c--components--button--danger--color-disabled);
}

.c__button--danger:active,
.c__button--danger.c__button--active {
  border: 1px solid transparent;
}

/**
 * END NEW BUTTONS
*/
.c__button:hover.c__button-no-bg,
.c__button.c__button-no-bg,
.c__button:disabled.c__button-no-bg {
  background-color: transparent;
}

.c__button--nano.c__button--icon-only {
  width: auto;
}

.c__button--nano.c__button--icon-only.c__button--full-width {
  width: 100%;
}

.c__button--with-icon--right {
  padding: 0.7rem var(--c--globals--spacings--t) 0.7rem
    var(--c--globals--spacings--s);
}

/**
 * Modal
*/
.c__modal__backdrop {
  z-index: 1000;
}

.c__modal__close .c__button--tertiary-text:hover,
.c__modal__close .c__button--tertiary-text:focus-visible {
  box-shadow: none;
}

.c__modal--full .c__modal__content {
  overflow-y: auto;
}

.c__modal__content {
  font-size: var(--c--globals--font--sizes--sm);
  color: var(
    --c--contextuals--content--semantic--neutral--secondary
  ) !important;
}

.c__modal__content__margin {
  padding: var(--c--globals--spacings--md);
  padding-bottom: 0;
}

.c__modal__title {
  padding: var(--c--globals--spacings--md);
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: var(--c--globals--font--sizes--lg) !important;
}

@media screen and (width <= 420px) {
  .c__modal__scroller {
    padding: 0;
  }

  .c__modal__title {
    font-size: 1rem;
    text-align: left;
  }
}

.c__modal__footer {
  margin-top: 0;
  background-color: transparent !important;
  padding: var(--c--globals--spacings--md);
}

@media screen and (width <= 576px) {
  .c__modal__footer--sided {
    gap: 0.5rem;
    flex-direction: column-reverse;
  }
}

.c__modal__scroller {
  padding: 0 !important;
}

.c__modal__scroller:has(.noPadding) {
  padding: 0 !important;

  .c__modal__close .c__button {
    right: 5px;
    top: 5px;
    padding: 1.5rem 1rem;
  }

  .c__modal__title {
    font-size: var(--c--globals--font--sizes--xs);
    padding: var(--c--globals--spacings--base);
    margin-bottom: 0;
  }
}

/**
 * Toast
*/
.c__toast__container {
  z-index: 10000;
}

/**
 * Tooltip
*/
.c__tooltip {
  padding: 4px 6px;
}
