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

/**
 * Add spacing to top and bottom of pages.
 */

.page-content {
  margin-block: 0 5rem;

  > .help,
  > .region-content,
  > .region-highlighted {
    @media (min-width: 48em) {
      margin-block-start: var(--admin-space-l);
    }
  }
}

/**
 * Add color to layout icons.
 */

.layout-icon__region {
  fill: #f5f5f2;
  stroke: #666;
}

.region-sticky {
  position: sticky;
  z-index: 101;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--admin-theme-height-sticky);
  padding: 0;
  background: var(--admin-color-bg);
  inset-block-start: var(--admin-theme-toolbar-y-offset);

  .gin--edit-form & {
    inset-block-start: calc(var(--admin-theme-toolbar-y-offset) - var(--admin-space-2xl) - var(--admin-space-2xs));
    padding-block-start: var(--admin-space-m);

    @media (min-width: 64em) {
      inset-block-start: var(--admin-theme-toolbar-y-offset);
      padding-block-start: var(--admin-space-s);
    }
  }

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

  @media (min-width: 64em) {
    height: var(--admin-theme-height-sticky);
    margin-block-end: 0;
    padding: var(--admin-space-s) 0;
    inset-block-start: -1px;

    .gin--navigation &,
    .gin--vertical-toolbar &,
    .gin--horizontal-toolbar &,
    .gin--classic-toolbar & {
      inset-block-start: var(--admin-theme-toolbar-y-offset);
    }
  }
}

.region-sticky-watcher {
  position: sticky;
  inset-block-start: -1px;
  height: 0;
}

.region-sticky--is-sticky {
  opacity: 0.95;
  background: var(--admin-color-bg);

  .gin--high-contrast-mode & {
    background: var(--admin-color-bg);
    backdrop-filter: none;
  }

  @supports (backdrop-filter: blur()) {
    opacity: 0.999;
    /* stylelint-disable-next-line color-function-notation */
    background: rgb(from var(--app-bg-color) r g b/ 0.8);
    backdrop-filter: blur(0.75rem);
  }
}

.region-sticky__items {
  display: flex;
  flex-grow: 1;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 100%;

  .block-page-title-block {
    /* @todo add this back after visual regression against Gin 5.x */
    /* display: flex; */
    flex-grow: 1;
    align-self: center;
    min-width: 0;

    .page-title {
      align-self: center;
      margin: 0;
    }
  }

  .gin-sticky-form-actions {
    display: flex;
    width: auto;
    margin-block-start: 0;

    @media (min-width: 64em) {
      padding-inline-start: var(--admin-space-l);
    }
  }

  [id*="block-gin-local-actions"] + .gin-sticky-form-actions {
    padding-inline-start: var(--admin-space-xs);
  }

  @media (min-width: 48em) {
    .settings-tray-editable {
      flex-shrink: 0;
    }
  }
}

.region-sticky__items__inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  @media (min-width: 64em) {
    flex-wrap: nowrap;
    align-items: center;
    margin-block-end: 0;
  }
}

.sticky-shadow {
  @media (min-width: 64em) {
    position: relative;
    z-index: 98;
    height: 2.5rem;
    pointer-events: none;
    box-shadow: 0 10px 20px -16px rgb(0, 0, 0, 0.4);
    margin-block: calc(var(--admin-space-3xl) * -1) var(--admin-space-l);
    margin-inline: auto;

    .gin--dark-mode & {
      box-shadow: none;
    }
  }

  @media (min-width: 64em) {
    position: sticky;
    inset-block-start: calc(var(--admin-theme-toolbar-y-offset) + (var(--admin-theme-height-sticky) - 2.5rem));
    width: calc(100% - min(10vw, 6rem) + var(--admin-space-l));

    .gin--edit-form & {
      max-width: 81.25rem;
    }
  }
}

.page-wrapper {
  @media (min-width: 64em) {
    margin-block-start: 1px;
    /* fix for inset-block-start: auto; */
  }
}

.gin-sticky-form-actions {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .form-actions {
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }

  .field--name-status {
    display: flex;
    align-items: center;
    margin-inline-end: var(--admin-space-xs);

    .form-item__label {
      font-size: 0.8125rem;

      @media (max-width: 26.24em) {
        display: none;
      }
    }

    .form-type--checkbox {
      margin-block: var(--admin-space-xs);
    }
  }

  @media (min-width: 64em) {
    flex-wrap: nowrap;
    width: max-content;
  }
}