.layout-region-node-secondary {
  transition: transform var(--gin-transition-fast);

  // Fixes the flickering happinging on smaller devices.
  @include mq($to: large) {
    opacity: 0;
    visibility: hidden;
  }
}

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

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

// RTL handling.
[dir=rtl] body[data-meta-sidebar=closed] .layout-region-node-secondary {
  /*rtl:ignore*/
  transform: translateX(calc(var(--gin-sidebar-width) * -1));
}

body[data-meta-sidebar=open] {
  .layout-region-node-secondary {
    @include mq($to: large) {
      opacity: 1;
      visibility: visible;
    }
  }
}

.meta-sidebar {
  &__trigger,
  &__close {
    cursor: pointer;
    background: transparent;
    height: 32px;
    width: 32px;
    border-radius: var(--gin-border-m);
    transition: background var(--gin-transition-fast);

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

    &: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);
      }
    }
  }

  &__trigger {
    margin-left: var(--gin-spacing-xs);

    &::before {
      mask-image: icon('sidebar');
      mask-size: var(--gin-icon-size-sidebar-toggle) var(--gin-icon-size-sidebar-toggle);
      border-radius: 50%;
    }
  }

  &__close {
    z-index: 104;
    position: absolute;
    top: 18px;
    right: var(--gin-spacing-m);

    @include mq(large) {
      display: none;
    }

    &::before {
      mask-image: icon('close');
      mask-size: 16px 16px;
    }
  }

  &__overlay {
    z-index: 102;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: var(--gin-bg-layer2);

    body[data-meta-sidebar=open] & {
      opacity: .9;
      visibility: visible;
    }

    @include mq(large) {
      display: none;
    }
  }
}