dialog.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/**
 * @file
 * Dialog theme overrides for form elements, links, and controls.
 */

/* cspell:ignore tablesaw */

.ui-dialog {
  a,
  .link,
  button.link,
  .tabs__link.is-active,
  [open] .gin-details__summary--accordion,
  [open] .gin-details__summary--accordion-item,
  [open] .gin-details__summary--vertical-tabs-item,
  .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
    color: var(--gin-color-primary);
    text-decoration-style: var(--gin-link-decoration-style);

    &:hover {
      color: var(--gin-color-primary-hover);
    }

    &:active {
      color: var(--gin-color-primary-active);
    }
  }

  *|*:any-link:not(svg|a) {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-style: var(--gin-link-decoration-style);
  }

  .is-horizontal .tabs__link:hover,
  .gin-details__summary:hover,
  .action-link:hover {
    color: var(--gin-color-primary-hover);
  }

  .gin-details[open] > .gin-details__summary:focus {
    color: var(--gin-color-primary-active);
  }

  .form-boolean--type-checkbox:checked,
  .form-boolean--type-radio:checked:not(:disabled),
  .is-horizontal .tabs__link.is-active::before,
  .tabs__tab.is-active::before,
  [open] > .gin-details__summary--accordion:not(:focus, :active)::after,
  [open] > .gin-details__summary--accordion-item:not(:focus, :active)::after,
  .collapse-processed[open] > .gin-details__summary--accordion .details-title:not(:focus)::after,
  .collapse-processed[open] > .gin-details__summary--accordion-item .details-title:not(:focus)::after,
  [open] > .gin-details__summary--vertical-tabs-item:not(:focus, :active)::after,
  .collapse-processed[open] > .gin-details__summary--vertical-tabs-item .details-title:not(:focus)::after,
  .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
    border-color: var(--gin-color-primary);

    &:hover {
      border-color: var(--gin-color-primary-hover);
    }

    &:active {
      border-color: var(--gin-color-primary-active);
    }
  }

  .form-element {
    box-sizing: border-box;
    min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
    color: var(--gin-color-text);
    border: 1px solid var(--gin-border-color-form-element);
    border-radius: var(--gin-border-m);
    background-color: var(--gin-bg-input);
    line-height: var(--input-line-height);
    padding-block: calc(var(--input-padding-vertical) - 1px);
    padding-inline: var(--input-padding-horizontal);

    &:hover {
      border-color: var(--gin-color-text);
      box-shadow: inset 0 0 0 1px var(--gin-color-text);
    }

    &[disabled],
    &[disabled]:hover {
      cursor: not-allowed;
      color: var(--gin-color-disabled);
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg) !important;
      box-shadow: none;
    }

    .gin--dark-mode 

    @media (prefers-reduced-motion: no-preference) {
      transition: var(--gin-transition);
    }
  }

  .form-element--small,
  .form-element--extrasmall {
    border-radius: var(--gin-border-s);
    font-size: var(--font-size-s);
    line-height: 1.5;
  }

  .form-textarea-wrapper {
    border-radius: var(--gin-border-m);

    textarea {
      max-width: 100%;
    }
  }

  .form-item--editor-format,
  .form-element--editor-format {
    width: auto;

    .form-item__label {
      inset-block-start: 0.1875rem;
      padding-block-end: 0;
    }
  }

  .password-field {
    width: 100%;
  }

  .password-confirm {
    width: 100%;
    max-width: var(--gin-max-line-length);
  }

  .password-strength__title {
    color: var(--gin-color-text-light);
  }

  .password-strength__text {
    color: var(--gin-color-title);
  }

  .password-suggestions {
    color: var(--gin-color-text-light);
    border: 1px solid var(--gin-border-color-layer2);
    background-color: transparent;
  }

  .form-element--type-select {
    padding-inline-end: calc(var(--space-xs) + var(--space-xl) - 1px);

    .gin--dark-mode 
  }

  .form-element--type-select--small {
    min-height: 2.25rem;
    background-position: 100% 52%;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    padding-block: 0.474rem;

    &:dir(rtl) {
      background-position: 0% 52%;
    }
  }

  .form-boolean {
    width: 1.3125rem;
    height: 1.3125rem;
    border-color: var(--gin-border-color-form-element);
    border-radius: var(--gin-border-xs);
  }

  .form-boolean--type-checkbox {
    .gin--dark-mode &:not(:checked) {
      background: var(--gin-bg-input);
    }

    &:checked {
      background-color: var(--gin-color-primary);

      .gin--dark-mode &:not(:disabled) {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath fill='currentColor' d='M5.69238 10.6436L9.27246 14.4023L18.3076 4.91309L20.5342 7.25391L9.27246 19.0869L3.46582 12.9844L5.69238 10.6436Z' /%3e%3c/svg%3e");
      }

      &:hover {
        background-color: var(--gin-color-primary-hover);
      }

      &:active {
        background-color: var(--gin-color-primary-active);
      }
    }

    &[disabled],
    &[disabled]:hover {
      cursor: not-allowed;
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg);
    }

    &[disabled]:checked,
    &[disabled]:hover:checked {
      border-color: var(--gin-color-disabled-border);
      background-color: var(--gin-color-disabled-bg);
      box-shadow: none;
    }
  }

  .gin--dark-mode & .form-boolean:hover,
  .gin--dark-mode & .form-boolean:active {
    border-color: var(--gin-color-text);
    box-shadow: none;
  }

  .form-boolean--type-radio {
    &,
    &:hover,
    &:active,
    &:focus,
    &:hover:focus {
      border-color: var(--gin-border-color-form-element);
      border-radius: 50%;
      background-color: var(--gin-bg-input);
      background-image: none;
    }

    &:hover {
      box-shadow: inset 0 0 0 1px var(--gin-border-color-layer2);
    }

    &:hover {
      border-color: var(--gin-color-text);
    }

    .gin--dark-mode &:hover {
      border-color: var(--gin-color-text);
    }

    &:active,
    &:focus {
      box-shadow:
        inset 0 0 0 1px var(--gin-border-color-layer2),
        0 0 0 1px var(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }

    &:checked:not(:disabled) {
      &,
      &:hover {
        background-color: var(--gin-bg-layer);
        background-image: none;
        box-shadow: inset 0 0 0 5px var(--gin-color-primary);
      }

      &:active,
      &:focus,
      &:hover:focus {
        border-color: var(--gin-color-focus-border);
        box-shadow:
          inset 0 0 0 5px var(--gin-color-primary),
          0 0 0 1px var(--gin-color-focus-border),
          0 0 0 4px var(--gin-color-focus);
      }
    }

    &:disabled,
    &:disabled:hover {
      cursor: not-allowed;
      border-color: var(--gin-color-disabled-border);
      background: var(--gin-color-disabled-bg);
    }

    &:checked:disabled,
    &:checked:disabled:hover {
      background: var(--gin-color-disabled);
      box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);
    }
  }
}

/* Toggle checkbox — long selector kept at top level to limit nesting depth. */

.ui-dialog :not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {
  position: relative;
  margin-inline-start: 0;

  input {
    all: unset;
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
    vertical-align: top;
    border: 3px solid transparent;
    border-radius: var(--gin-border-l);
    background-color: var(--gin-color-disabled);
    appearance: none;
    clip-path: circle(var(--space-l) at 50% 50%);

    .gin--dark-mode 

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      transform: translateX(-1rem);
      border-radius: 1.3125rem;
      background-color: #fff;

      &:dir(rtl) {
        transform: translateX(1rem);
      }

      .gin--dark-mode 

      @media (prefers-reduced-motion: no-preference) {
        transition: transform 0.3s;
      }

      @media (forced-colors: active) {
        background-color: CanvasText;
      }
    }

    &:disabled {
      cursor: not-allowed;
    }

    &:hover {
      opacity: 0.9;
      box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);
    }

    &:active,
    &:focus {
      box-shadow:
        0 0 0 1px var(--gin-color-focus-border),
        0 0 0 4px var(--gin-color-focus);
    }

    &:checked {
      background-color: var(--gin-switch);

      .gin--dark-mode 

      &::before {
        transform: translateX(1rem);
        background-color: #fff;

        &:dir(rtl) {
          transform: translateX(-1rem);
        }

        .gin--dark-mode 

        .gin--high-contrast-mode 

        @media (forced-colors: active) {
          padding-inline-start: var(--space-xs);
          background-color: LinkText !important;
        }
      }

      @media (forced-colors: active) {
        &::after {
          mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath fill='currentColor' d='M5.69238 10.6436L9.27246 14.4023L18.3076 4.91309L20.5342 7.25391L9.27246 19.0869L3.46582 12.9844L5.69238 10.6436Z' /%3e%3c/svg%3e");
          mask-position: 2px 2px;
          transform: translateX(1rem);

          &:dir(rtl) {
            transform: translateX(-1rem);
          }
        }
      }
    }

    &:disabled {
      opacity: 0.75;
      background-color: var(--gin-color-disabled);
      box-shadow: none;

      &::before {
        opacity: 0.6;
        background-color: #fff;
      }
    }

    @media (forced-colors: active) {
      border-width: 2px;
    }

    @media (forced-colors: active) {
      &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        transition: transform 0.3s;
        transform: translateX(-1rem);
        background-color: Canvas;
        mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='currentColor'%3e    %3cpath d='M17.8977 11.9773C17.8977 13.2462 17.6572 14.3258 17.1761 15.2159C16.6989 16.1061 16.0473 16.786 15.2216 17.2557C14.3996 17.7216 13.4754 17.9545 12.4489 17.9545C11.4148 17.9545 10.4867 17.7197 9.66477 17.25C8.8428 16.7803 8.19318 16.1004 7.71591 15.2102C7.23864 14.3201 7 13.2424 7 11.9773C7 10.7083 7.23864 9.62879 7.71591 8.73864C8.19318 7.84848 8.8428 7.17045 9.66477 6.70455C10.4867 6.23485 11.4148 6 12.4489 6C13.4754 6 14.3996 6.23485 15.2216 6.70455C16.0473 7.17045 16.6989 7.84848 17.1761 8.73864C17.6572 9.62879 17.8977 10.7083 17.8977 11.9773ZM15.4034 11.9773C15.4034 11.1553 15.2803 10.4621 15.0341 9.89773C14.7917 9.33333 14.4489 8.9053 14.0057 8.61364C13.5625 8.32197 13.0436 8.17614 12.4489 8.17614C11.8542 8.17614 11.3352 8.32197 10.892 8.61364C10.4489 8.9053 10.1042 9.33333 9.85795 9.89773C9.61553 10.4621 9.49432 11.1553 9.49432 11.9773C9.49432 12.7992 9.61553 13.4924 9.85795 14.0568C10.1042 14.6212 10.4489 15.0492 10.892 15.3409C11.3352 15.6326 11.8542 15.7784 12.4489 15.7784C13.0436 15.7784 13.5625 15.6326 14.0057 15.3409C14.4489 15.0492 14.7917 14.6212 15.0341 14.0568C15.2803 13.4924 15.4034 12.7992 15.4034 11.9773Z' /%3e  %3c/g%3e%3c/svg%3e");
        mask-size: 1rem 1rem;
        mask-position: 1.0625rem 2px;
        mask-repeat: no-repeat;

        &:dir(rtl) {
          transform: translateX(1rem);
        }
      }
    }
  }

  label {
    position: relative;
    z-index: 1;
    padding-block-end: 0;
    padding-inline-start: var(--space-xxs);
    color: var(--gin-color-text);
  }
}

.ui-dialog table:has(.tabledrag-cell-content__item .form-checkbox) th.select-all .form-checkbox {
  margin-inline-start: calc(var(--tabledrag-handle-icon-size, 1.0625rem) + var(--space-m));
}

.ui-dialog {
  .form-radios .form-type--boolean,
  .form-checkboxes .form-type--boolean {
    margin-block: var(--space-xs);
  }

  .form-actions {
    margin-block-end: 0;
  }

  .form-edit .form-actions {
    margin-block-end: 0;
    padding: 0;
    border: 0 none;
    background-color: transparent;
  }

  fieldset:not(.fieldgroup) {
    padding-block-start: var(--space-xs);
    color: var(--gin-color-text-light);
    border-color: var(--gin-border-color);
    border-radius: var(--gin-border-m);
    background: transparent;
    box-shadow: none;
    padding-inline: 0;

    > legend {
      inset-block-start: 1.25rem;
    }

    > .fieldset-wrapper {
      margin-block-start: 1.25rem;
    }

    &.error {
      border: 2px solid var(--gin-color-danger);
    }
  }

  .fieldset__label,
  .fieldset__label--group,
  .form-item__label {
    margin-block-start: 0;
    margin-block-end: var(--space-xs);
    color: var(--gin-color-title);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
  }

  .form-item__label.has-error,
  .form-item__error-message {
    color: var(--gin-color-danger);
  }

  .form-item__description,
  .fieldset__description,
  .filter-guidelines__item {
    max-width: var(--gin-max-line-length);
    color: var(--gin-color-text-light);
  }

  .form-item__label.form-required::after,
  .fieldset__label.form-required::after,
  .form-required > .fieldset__label::after,
  .horizontal-tab-button .form-required::after,
  .vertical-tabs__menu-link .form-required::after {
    content: "*";
    vertical-align: text-top;
    color: var(--gin-color-danger);
    background: none;
    line-height: 1;
    margin-inline: 0.15em;
  }

  .gin-details.error {
    border: 2px solid var(--gin-color-danger);
  }

  .gin-details__summary:not(.form-required) .required-mark {
    display: none;
  }

  .form-item__warning {
    display: inline-block;
    margin-block-start: var(--space-xs);
  }

  html.js .form-autocomplete {
    padding-inline-end: 2.25rem;
  }

  .entity-form-display-form > .form-actions {
    margin-block: 0;
  }

  .required-mark::after {
    background: var(--gin-color-danger);
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath fill='currentColor' d='M2.04075 11.8689C0.928882 11.5926 0.29649 10.428 0.649643 9.33809L1.03815 8.1391C1.38495 7.06881 2.54758 6.49302 3.60207 6.88526C6.46906 7.95171 8.62177 8.8925 10.056 9.711C9.74558 6.74781 9.53464 4.4103 9.42271 2.69849C9.34986 1.58418 10.2445 0.670502 11.3612 0.670502H12.5329C13.662 0.670502 14.5685 1.60439 14.4925 2.73093C14.3582 4.72214 14.1151 7.03801 13.7595 9.675C15.7523 8.6714 17.9727 7.72805 20.4268 6.84493C21.4712 6.46909 22.609 7.04742 22.9509 8.1034L23.3877 9.45211C23.7265 10.4983 23.158 11.6263 22.1012 11.9303C19.6815 12.6263 17.2999 13.1093 14.958 13.377C16.1733 14.4342 17.7995 16.1718 19.8382 18.5897C20.5852 19.4756 20.404 20.8085 19.4584 21.4784L18.4529 22.1909C17.5622 22.8219 16.329 22.6233 15.7171 21.7193C14.5769 20.035 13.2955 17.9684 11.874 15.519C10.5582 18.0261 9.35897 20.0984 8.27812 21.7312C7.67842 22.6371 6.44976 22.8207 5.56848 22.1853L4.58713 21.4778C3.65477 20.8056 3.47894 19.4861 4.212 18.6008C6.32731 16.0463 7.88831 14.305 8.895 13.377C6.5197 12.9182 4.23473 12.4141 2.04075 11.8689Z' /%3e%3c/svg%3e");
    mask-position: center center;
    mask-size: 100% 100%;
  }

  .form-wrapper .form-item__label,
  .form-composite .form-item__label {
    position: relative;
  }

  .field--type-text-with-summary .form-item,
  .field--widget-text-textarea .form-item {
    margin-block-end: 0;
  }

  .field--type-text-with-summary .filter-wrapper,
  .field--widget-text-textarea .filter-wrapper {
    border: 0 none;
    padding-inline: 0;
  }

  .gin-autocomplete {
    width: calc(100% - var(--space-m));

    .form-autocomplete {
      width: 100%;
    }
  }

  .no-touchevents .form-element--type-select.form-element--extrasmall {
    min-height: 1.75rem;
    font-size: var(--font-size-s);
    line-height: 1.5;
  }

  #block-gin-content > form > .form-item:first-of-type {
    margin-block-start: 0;
  }

  .image-style-new .form-item {
    margin-inline-end: var(--space-xxs);
  }

  tr .form-item {
    margin-block: 0;
  }

  .container-inline .form-item {
    margin-block: var(--gin-spacing-density-s);
  }

  .field-plugin-settings-edit-form {
    margin-block-start: var(--space-s);

    .form-item {
      margin-block: var(--space-m);
    }

    .form-boolean-group .form-item {
      margin-block: var(--space-xs);
    }
  }

  .length-indicator {
    margin-block-end: var(--space-l);
  }
}