@import '~@payloadcms/ui/scss';

@layer payload-default {
  .export-list-menu-item {
    .doc-drawer__toggler {
      height: 100%;
      width: 100%;
      text-align: left;
    }


    // TODO: is any of this css needed?
    &__subheader,
    &__header {
      padding: 0 var(--gutter-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--theme-border-color);

      & h2 {
        margin: calc(var(--gutter-h) * 0.5) 0;
      }
    }

    &__options,
    &__preview {
      padding: calc(var(--gutter-h) * 0.5) var(--gutter-h);
    }

    &__preview-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(var(--gutter-h) * 0.5);
    }

    &__close {
      @include btn-reset;
    }

    &__icon {
      width: 3rem;
      height: 3rem;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
