sidebar.css

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

/**
 * @file
 * Sidebar panel and controls.
 */

#gin-sidebar-draggable {
  position: absolute;
  z-index: 104;
  display: block;
  width: 2px;
  height: 100%;
  padding: 0;
  cursor: ew-resize;
  inset-block-start: 0;
  inset-inline-start: 0;

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

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

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

.layout-region--secondary {
  @media (prefers-reduced-motion: no-preference) {
    transition: transform var(--gin-transition-fast);
  }

  @media (max-width: 60.99em) {
    --gin-sidebar-width: var(--gin-sidebar-small-width);
  }

  @media (max-width: 63.99em) {
    visibility: hidden;
    opacity: 0;
  }
}

body[data-meta-sidebar="closed"] {
  --gin-sidebar-offset: 0px;

  .layout-region--secondary {
    visibility: hidden;
    transform: translateX(var(--gin-sidebar-width));

    &:dir(rtl) {
      transform: translateX(calc(var(--gin-sidebar-width) * -1));
    }
  }
}

body[data-meta-sidebar="open"] {
  .layout-region--secondary {
    @media (max-width: 63.99em) {
      visibility: visible;
      opacity: 1;
    }
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
.meta-sidebar__close {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: var(--gin-border-m);
  background: transparent;

  &::before {
    display: inline-block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--gin-icon-color);
    mask-repeat: no-repeat;
    mask-position: center center;
  }

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

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

  &.is-active {
    background-color: var(--gin-color-primary-light-hover);

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

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

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__trigger,
.meta-sidebar__trigger {
  display: block;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: var(--gin-border-m);
  background: transparent;

  &::before {
    display: inline-block;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 50%;
    background-color: var(--gin-icon-color);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e    %3crect x='2' y='2' width='20' height='18' rx='4' ry='4'%3e%3c/rect%3e    %3cline x1='14' y1='2' x2='14' y2='20'%3e%3c/line%3e    %3cline x1='17.25' y1='7' x2='18.5' y2='7'%3e%3c/line%3e    %3cline x1='17.25' y1='11.5' x2='18.5' y2='11.5'%3e%3c/line%3e  %3c/g%3e%3c/svg%3e");
    mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);
  }

  &:hover,
  &:focus,
  &.is-active,
  &.is-active:hover {
    background-color: var(--gin-color-primary-light);

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

  &.is-active {
    background-color: var(--gin-bg-item-hover);
  }

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

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__close,
.meta-sidebar__close {
  position: absolute;
  z-index: 104;
  inset-block-start: 1.125rem;
  inset-inline-end: var(--space-m);

  &::before {
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3e    %3cpath d='M20 4L4 20' /%3e    %3cpath d='M4 4L20 20' /%3e  %3c/g%3e%3c/svg%3e");
    mask-size: 1rem 1rem;
  }

  @media (min-width: 64em) {
    display: none;
  }
}

:is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,
.meta-sidebar__overlay {
  position: fixed;
  z-index: 102;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--gin-bg-layer2);
  inset-block-start: 0;
  inset-inline-start: 0;

  @media (min-width: 64em) {
    display: none;
  }
}

body[data-meta-sidebar="open"] :is(#extra-specificity-hack, [data-drupal-admin-styles]) .meta-sidebar__overlay,
body[data-meta-sidebar="open"] .meta-sidebar__overlay {
  visibility: visible;
  opacity: 0.9;
}