@import '@financial-times/o-forms/main';
@include oForms();

.n-myft-ui__preferences-modal {
  display: none;
  visibility: hidden;
  position: absolute;
  color: var(--o3-color-palette-black);
  background-color: var(--o3-color-palette-white-80);
  border-radius: 10px;
  border: 2px solid var(--o3-color-palette-black-5);
  width: 275px;
  text-transform: none;
  z-index: 9999999;
}

.n-myft-ui__preferences-modal__content {
  position: relative;
  margin: 20px 20px 24px;
}

.n-myft-ui__preferences-modal__checkbox__message {
  font-style: normal;
  font-weight: var(--o3-font-weight-semibold);
  line-height: var(--o3-font-lineheight-metric2-negative-1);
  font-size: var(--o3-font-size-metric2-negative-1);
  font-family: var(--o3-font-family-metric);
}

.n-myft-ui__preferences-modal__text {
  font-style: normal;
  font-weight: var(--o3-font-weight-regular);
  line-height: var(--o3-font-lineheight-metric2-negative-2);
  font-size: var(--o3-font-size-metric2-negative-2);
  font-family: var(--o3-font-family-metric);
  margin-bottom: 0;
}

.n-myft-ui__preferences-modal__remove-button {
  margin-top: 20px;
  height: 32px;
  width: 100%;
  border-radius: 20px;
  border: 2px solid var(--o3-color-palette-black-20);
  background-color: var(--o3-color-palette-white-80);
  font-style: normal;
  font-weight: var(--o3-font-weight-regular);
  line-height: var(--o3-font-lineheight-metric2-negative-2);
  font-size: var(--o3-font-size-metric2-negative-2);
  font-family: var(--o3-font-family-metric);
  color: var(--o3-color-palette-black-80);
}

.n-myft-ui__preferences-modal__remove-button:not([disabled]):hover,
.n-myft-ui__preferences-modal__remove-button:not([disabled]):focus {
  border: 2px solid var(--o3-color-palette-claret-60);
  background-color: #ebc4c3; // Fallback color for browsers that do not support color-mix
  background-color: color-mix(
    in srgb,
    var(--o3-color-palette-claret-60) 20%,
    var(--o3-color-palette-paper)
  );
  color: var(--o3-color-palette-claret-60);
}

.n-myft-ui__preferences-modal__remove-button:disabled {
  opacity: 0.5;
}

.n-myft-ui__preferences-modal--show {
  display: block;
  visibility: visible;
}

// reference to the color/BG color of the error message
// components/o-message/src/scss/_brand.scss#L21 in origami
.n-myft-ui__preferences-modal-error {
  display: block;
  font-style: normal;
  font-weight: var(--o3-font-weight-regular);
  line-height: var(--o3-font-lineheight-metric2-negative-2);
  font-size: var(--o3-font-size-metric2-negative-2);
  font-family: var(--o3-font-family-metric);
  color: #b30000; // Fallback color for browsers that do not support color-mix
  color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
  background-color: #fad9ce; // Fallback color for browsers that do not support color-mix
  background-color: color-mix(
    in srgb,
    var(--o3-color-palette-crimson) 10%,
    var(--o3-color-palette-paper)
  );
  text-align: left;
  padding: 8px 12px;
  margin-top: 16px;

  // use opacity to enforce CSS transition
  opacity: 1;
  transition: opacity 0.5s;

  a {
    font-style: normal;
    font-weight: var(--o3-font-weight-semibold);
    line-height: var(--o3-font-lineheight-metric2-negative-2);
    font-size: var(--o3-font-size-metric2-negative-2);
    font-family: var(--o3-font-family-metric);
    color: #b30000; // Fallback color for browsers that do not support color-mix
    color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
    text-decoration-color: #b30000; // Fallback color for browsers that do not support color-mix
    text-decoration-color: color-mix(
      in srgb,
      var(--o3-color-palette-black) 12.5%,
      var(--o3-color-palette-crimson)
    );
  }
}

.n-myft-ui__preferences-modal-error:empty {
  opacity: 0;
  padding: 0;
  margin-top: 0;
}