.sw-viewer {
  --header-height: var(--rhythm-6);
  --side-padding: var(--rhythm-2);
  --top-padding: 0;
  --bottom-padding: var(--rhythm-2);

  background: var(--modal-background-color);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  transition: padding-right var(--transition-moderate);
  z-index: calc(var(--z-index-modal) + 10);

  header {
    --header-padding-left: var(--rhythm-2);
    --header-padding-right: var(--rhythm-0_5);

    align-items: center;
    align-self: stretch;
    display: flex;
    gap: var(--rhythm-0_5);
    height: var(--header-height);
    justify-content: space-between;
    padding: 0 var(--header-padding-right) 0 var(--header-padding-left);

    .header-title {
      align-items: center;
      display: flex;
      gap: var(--rhythm-1);
      max-width: calc(100% - var(--header-actions-width) - var(--header-padding-left) - var(--header-padding-right));
    }

    .header-actions {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      gap: var(--rhythm-1);
      justify-content: flex-end;
    }

    .separator {
      background: var(--color-neutral-light);
      height: var(--rhythm-5);
      width: 1px;
    }
  }

  .viewer-body {
    height: calc(100% - var(--header-height));
    padding: var(--top-padding) var(--side-padding) var(--bottom-padding);
    overflow: hidden;
  }

  .summary-container {
    padding: var(--rhythm-2);
  }
}

@media (max-width: 647px) {
  .sw-viewer {
    .viewer-body {
      --section-spacing: var(--rhythm-1);

      .side-panel {
        margin-top: var(--section-spacing);
      }
    }
  }
}

@media (min-width: 648px) {
  .sw-viewer {
    --top-padding: var(--rhythm-2);

    header {
      gap: var(--rhythm-2);

      .header-title,
      .header-actions {
        gap: var(--rhythm-1_5);
      }
    }

    .viewer-body {
      --side-panel-button-size: var(--rhythm-4);
      --side-panel-gap: var(--rhythm-1);
      --side-panel-width: var(--rhythm-36);

      padding-right: var(--side-panel-button-size);
      transition: padding-right var(--transition-moderate);

      .viewer-content {
        height: calc(100% - var(--top-padding) - var(--bottom-padding));
      }

      .side-panel {
        --panel-section-margin-bottom: var(--rhythm-1);
        --metadata-height: var(--panel-section-margin-bottom) * (var(--metadata-block-count, 1)) - var(
            --expander-header-height
          ) * (var(--metadata-block-count, 1) + var(--search-section-count));
        --expander-max-height: var(--header-height) - var(--top-padding) - var(--bottom-padding) - var(
            --find-input-height
          ) - var(--panel-section-margin-bottom) - var(--metadata-height);

        display: flex;
        gap: var(--side-panel-gap);
        height: 100%;
        position: absolute;
        right: calc(var(--side-panel-width) * -1 + var(--side-panel-button-size));
        top: calc(var(--header-height) + var(--top-padding));
        transition: right var(--transition-moderate);
        width: var(--side-panel-width);

        .side-panel-button-container {
          display: flex;
          flex-direction: column;
          gap: var(--rhythm-1);
        }

        .side-panel-button {
          align-items: center;
          background-color: var(--color-dark-stronger);
          color: var(--color-light-stronger);
          display: flex;
          height: var(--side-panel-button-size);
          justify-content: center;
          width: var(--side-panel-button-size);
        }

        .side-panel-content {
          height: calc(100% - (var(--header-height) + var(--top-padding) + var(--bottom-padding)));
          width: calc(
            var(--side-panel-width) - var(--side-panel-button-size) - var(--side-panel-gap) - var(--side-padding)
          );
        }

        .find-bar-container {
          align-items: center;
          background: var(--container-background-color);
          border-radius: var(--border-radius);
          display: flex;
          gap: var(--rhythm-1);
          justify-content: center;
          margin-bottom: var(--panel-section-margin-bottom);
          padding: 0 var(--rhythm-1);

          .search-icon {
            display: flex;
            flex: 0 0 auto;
          }
          .find-input {
            background: inherit;
            border: none;
            box-sizing: border-box;
            color: inherit;
            flex: 1 0 auto;
            font-family: inherit;
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-body);
            line-height: var(--find-input-height);
            padding: 0;

            &:focus {
              outline: 0;
            }
          }
        }

        .field-list {
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            display: flex;
            gap: var(--rhythm-1);
            padding: var(--rhythm-0_5) var(--rhythm-2);

            .field-icon {
              margin-top: var(--rhythm-0_5);
            }
            .field-item {
              display: flex;
              flex-direction: column;
            }
            small {
              color: var(--color-neutral-regular);
              margin-top: calc(var(--rhythm-0_5) * -1);
            }
          }
        }
      }

      &.side-panel-expanded {
        padding-right: var(--side-panel-width);

        .side-panel {
          right: 0;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  .sw-viewer {
    .viewer-body {
      --side-panel-button-size: var(--rhythm-5);
      --side-panel-width: var(--rhythm-46);
    }

    .side-panel {
      --find-input-height: var(--rhythm-5);
    }
  }
}

@media (hover: hover) {
  .sw-viewer {
    .side-panel-button {
      cursor: pointer;
    }

    .field-list {
      li:not(.current) {
        cursor: pointer;
        transition: background var(--transition-superfast);

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