.aem-Grid .side-drawer.aem-GridColumn.aem-GridColumn--default--12 {
  float: unset !important;
  width: unset !important;
  clear: unset !important; }

.side-drawer {
  display: none; }

.side-drawer .span-title {
  text-transform: uppercase;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  padding: calc(var(--space-3) + 4px);
  background-color: var(--calcite-ui-border-2);
  white-space: nowrap;
  color: var(--calcite-ui-text-1);
  padding-inline-start: calc(var(--space-12) - 3px);
  padding-inline-end: var(--space-6); }
  html[dir="rtl"] .side-drawer .span-title {
    padding-inline-start: var(--space-6);
    padding-inline-end: calc(var(--space-12) + 5px); }

.side-drawer--wrapper .side-drawer--tab-title {
  position: absolute;
  font-weight: var(--calcite-font-weight-medium);
  min-width: 150px;
  margin-inline-start: -100px;
  cursor: pointer;
  height: 0;
  padding: 0;
  background: transparent;
  border-style: hidden; }

.side-drawer--wrapper .side-drawer--content {
  transition: all 0.6s ease-out; }

.side-drawer--wrapper[aria-expanded="true"] .side-drawer--tab-close {
  top: 25px;
  left: 61px;
  outline: none;
  transform: rotate(45deg) scale(1.5);
  /* increased from 1.4 to 1.5, icon visually looks smaller rotated at 45 degrees */ }

.side-drawer--wrapper .side-drawer--tab-content {
  background: var(--calcite-ui-background);
  border: 1px solid var(--calcite-ui-border-3);
  border-width: 1px 0 1px 1px;
  transform-origin: top left; }

@media (min-width: 1024px) {
  .side-drawer {
    display: block;
    position: fixed;
    right: -2px;
    z-index: 999;
    margin-inline-end: 0;
    margin-inline-start: 99%; }
    html[dir="rtl"] .side-drawer {
      right: auto;
      left: 0px; }
  html[dir="rtl"] .side-drawer--tab-title[aria-expanded="true"] .side-drawer--tab-close {
    left: 47px;
    top: 19px; }
  .side-drawer--wrapper .side-drawer--tab-close {
    content: "";
    background-repeat: no-repeat;
    position: absolute;
    left: 73px;
    top: 18px;
    transition: all .47s ease-out;
    z-index: 9;
    transform: scale(1.4);
    color: var(--calcite-ui-text-1);
    cursor: pointer; }
    html[dir="rtl"] .side-drawer--wrapper .side-drawer--tab-close {
      left: 55px;
      top: 25px; }
  .side-drawer--wrapper[aria-expanded="false"] .side-drawer--content {
    max-width: 0;
    border: 1px solid var(--calcite-ui-border-3); }
  .side-drawer--wrapper[aria-expanded="true"] .side-drawer--content {
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--calcite-ui-border-3); } }