docs/src/frontend/apps/impress/src/cunningham/cunningham-style.css

@import url('@openfun/cunningham-react/icons');
@import url('@openfun/cunningham-react/style');
@import url('@openfun/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--theme--font--families--base);
}

.c__field {
  line-height: initial;
}

.labelled-box label {
  color: var(--c--theme--colors--primary-text);
}

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

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

/**
 * Input
 * TextArea
*/
.c__input__wrapper,
.c__textarea__wrapper {
  transition: all var(--c--theme--transitions--duration)
    var(--c--theme--transitions--ease-out);
}

.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:hover,
.c__textarea__wrapper:hover {
  box-shadow: var(--c--components--forms-input--box-shadow-color) 0 0 0 2px;
}

.c__textarea__wrapper--disabled:hover,
.c__input__wrapper--disabled:hover,
.c__input__wrapper:hover:has(input[readonly]) {
  box-shadow: var(--c--theme--colors--primary-500) 0 0 0 0;
}

.c__input__wrapper--disabled {
  color: var(--c--components--forms-input--value-color--disabled);
}

.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--components--forms-input--value-color--disabled);
}

.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--theme--transitions--duration)
    var(--c--theme--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__menu__item {
  transition: all var(--c--theme--transitions--duration)
    var(--c--theme--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);
  padding-block: 2rem;
}

.c__datagrid__table__container > table tbody tr {
  border: none;
  border-top: 1px var(--c--theme--colors--greyscale-100) solid;
  border-bottom: 1px var(--c--theme--colors--greyscale-100) solid;
}

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

.c__datagrid__table__container > table tbody tr:hover {
  background-color: var(
    --c--components--datagrid--body--background-color-hover
  );
}

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

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

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

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

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

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

@media (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--theme--transitions--duration)
    var(--c--theme--transitions--ease-out);
}

.c__date-picker:not(.c__date-picker--disabled):hover .c__date-picker__wrapper {
  box-shadow: var(--c--theme--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--theme--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--theme--colors--danger-300);
}

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

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

/**
 * Button
*/
.c__button {
  text-decoration: none;
}

.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--medium {
  padding: 0.9rem var(--c--theme--spacings--s);
}

.c__button--small {
  padding: 0.6rem 0.75rem;
}

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

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

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

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

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

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

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

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

.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,
.c__button--secondary:focus-visible {
  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--tertiary {
  color: var(--c--components--button--tertiary--color);
  border: none;
}

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

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

.c__button--tertiary-text {
  border: none;
}

.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--danger {
  background-color: var(--c--components--button--danger--background--color);
}

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

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

/**
 * 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__close button {
  padding: 1.5rem 1rem;
}

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