.PreviewFrame {
  background: var(--color-gray1);
  display: grid;
  grid-template:
    'typeActions typeActions' auto
    'typeControls typeControls' auto
    'previewDisplay previewDisplay' 1fr ~'/'
    minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  width: 100%;

  .ComboInput {
    --ComboInput-listPadding: calc(var(--gap-l) / 2);

    min-height: calc(var(--ComboInput-listPadding) * 2 + var(--Text-height));
    width: auto;

    &::before {
      display: none;
    }

    .ComboInput-icon::after {
      bottom: calc(
        var(--ComboInput-listPadding) + (var(--Text-height) - var(--Icon-size)) /
          2
      );
      right: var(--ComboInput-listPadding);
    }

    &,
    &:focus {
      padding: var(--ComboInput-listPadding);
      padding-right: calc(
        var(--gap-xs) + var(--Icon-size) + var(--ComboInput-listPadding)
      );
    }

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

.PreviewFrame-types {
  border-bottom: 1px solid var(--color-gray3);
  grid-area: types;
  padding-left: calc(var(--gap-l) / 2);
}

.PreviewFrame-typeFrame {
  display: contents;
}

.PreviewFrame-typeFrame > *:only-child {
  background: var(--color-white);
  grid-area: previewDisplay;
}

.PreviewFrame-typeControlsContainer {
  display: contents;

  > form {
    display: contents;
  }
}

.PreviewFrame-typeControls {
  border-bottom: 1px solid var(--color-gray3);
  grid-area: typeControls;
  padding: 0 calc(var(--gap-l) / 2);
}

.PreviewFrame-typeActions {
  align-items: center;
  border-bottom: 1px solid var(--color-gray3);
  display: flex;
  grid-area: typeActions;
  justify-content: end;
  padding-left: var(--gap-l);
  padding-right: calc(var(--gap-l) - var(--gap-s));

  .DateTimeInput {
    &.is-empty {
      .IconButton;

      --IconButton-name: 'date_range';

      padding-top: 0;
    }

    &::before {
      border: none;
    }
  }

  .action-share {
    .IconButton;

    --IconButton-name: 'open_in_new';

    order: 0;
  }

  .action-refresh {
    .IconButton;

    --IconButton-name: 'refresh';

    order: 0;
  }
}

.PreviewFrame-typeDisplay {
  background: var(--color-white);
  grid-area: previewDisplay;
}

.PreviewFrame.HasPreviewSelect {
  grid-template:
    'typeActions typeActions' auto
    'types typeControls' auto
    'previewDisplay previewDisplay' 1fr ~'/'
    minmax(0, 1fr) minmax(0, 1fr);
}

.PreviewFrame-previewToEditToggle {
  margin-right: auto;
  white-space: nowrap;

  & > label {
    align-items: center;
    display: flex;
    gap: var(--gap-s);
  }

  & input {
    .Checkbox;
    .Checkbox.is-toggle;
  }
}

.PreviewFrame:has(.PreviewFrame-previewToEditToggle input:not(:checked)) {
  & .Preview-overlayFrame {
    display: none;
  }
}
