settings.pcss.css

/**
 * @file
 * Gin admin settings page styles.
 */

[data-drupal-selector="edit-preset-accent-color"] .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--space-xs);

  .form-item--preset-accent-color {
    position: relative;

    input {
      width: 32px;
      height: 32px;
      margin-inline-end: var(--space-xs);
      cursor: pointer;
      border-color: transparent;
      inset-block-start: var(--space-m);

      &:hover {
        box-shadow: none;
      }

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

      &:focus:checked,
      &:focus,
      &:checked {
        background-color: var(--gin-color-primary);
        box-shadow:
          inset 0 0 0 2px var(--gin-bg-layer),
          inset 0 0 0 4px var(--gin-color-primary);
      }

      &[data-gin-accent="custom"] {
        border-color: var(--gin-border-color);
        background-color: #fff;
        background-image: url(../../../images/settings/custom-color.jpg);
        background-repeat: no-repeat;
        background-size: 100%;

        &:checked {
          border-width: 1px;
          border-color: var(--gin-border-color);
          background-color: #fff;
        }
      }
    }

    input,
    .gin--dark-mode & input {
      background-color: var(--gin-color-primary);
    }

    .form-item__label {
      position: absolute;
      z-index: 1;
      display: none;
      visibility: hidden;
      padding: var(--space-xs);
      transform: translateX(-50%);
      color: var(--gin-color-contextual-text);
      border-radius: var(--gin-border-xs);
      background: var(--gin-color-contextual);
      inset-block-start: 100%;
      inset-inline-start: -10px;

      &:dir(rtl) {
        transform: translateX(50%);
      }
    }

    &:hover .form-item__label,
    input:active ~ .form-item__label,
    input:focus ~ .form-item__label {
      display: block;
      visibility: visible;
    }
  }
}

[data-drupal-selector="edit-accent-group"] .form-type--color,
[data-drupal-selector="edit-accent-group"] .form-type--textfield,
[data-drupal-selector="edit-focus-group"] .form-type--color,
[data-drupal-selector="edit-focus-group"] .form-type--textfield {
  float: inline-start;
  margin: 0;
  margin-block-end: var(--space-xs);
}

[data-drupal-selector="edit-accent-group"] .form-type--color,
[data-drupal-selector="edit-focus-group"] .form-type--color {
  margin-inline-end: var(--space-xs);
}

[data-drupal-selector="edit-accent-group"] .fieldset__description,
[data-drupal-selector="edit-focus-group"] .fieldset__description {
  clear: both;
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0 var(--space-xxs);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--space-xl);

  .gin--dark-mode 

  .form-type--radio {
    margin-block: 0;
    margin-inline-start: 0;
  }

  .form-item__label {
    display: inline-block;
    box-sizing: border-box;
    margin: var(--space-xxs) 0;
    padding: 0.375rem var(--space-m);
    border: 2px solid transparent;
    border-radius: var(--gin-border-xl);

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

  input {
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: 0;

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

    &:checked + .form-item__label {
      color: var(--gin-color-button-text);
      background: var(--gin-color-primary);
    }
  }
}

[data-drupal-selector="edit-layout-density"] .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--space-xs);

  .form-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 140px;
    margin: 0;
    margin-inline-end: var(--space-s);

    input {
      position: static;
      width: 140px;
      height: 100px;
      margin-inline-start: 0;
      cursor: pointer;
      transform: none;
      border-radius: var(--gin-border-l);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      &:focus {
        border-color: var(--gin-color-text);
        box-shadow: 0 0 0 3px var(--gin-color-focus);
      }

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

      &:checked:focus {
        box-shadow:
          inset 0 0 0 1px var(--gin-color-primary),
          0 0 0 3px var(--gin-color-focus);
      }

      &[data-drupal-selector="edit-layout-density-default"] {
        background-image: url(../../../images/settings/layout_density_default.png);

        .gin--dark-mode 
      }

      &[data-drupal-selector="edit-layout-density-medium"] {
        background-image: url(../../../images/settings/layout_density_medium.png);

        .gin--dark-mode 
      }

      &[data-drupal-selector="edit-layout-density-small"] {
        background-image: url(../../../images/settings/layout_density_small.png);

        .gin--dark-mode 
      }
    }

    /* Original has a broken selector here — keeping behavior as-is */

    .form-item__label {
      display: block;
      margin-block-start: var(--space-xs);
      margin-block-end: var(--space-m);
      font-size: var(--font-size-xxs);
    }
  }
}