.layout {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.container {
  display: flex;
  height: calc(100dvh - var(--panel-height));
  margin-top: var(--panel-height);
  overflow-y: auto;

  &[data-auth='true'] {
    height: calc(100dvh - var(--panel-height) * 2);
  }
}

.main {
  flex: 1;
  height: calc(100dvh - var(--panel-height));
  overflow-y: auto;
  background-color: var(--color-gray-light);

  &[data-auth='true'] {
    height: calc(100dvh - var(--panel-height) * 2);
  }
}

.content {
  min-height: calc(100dvh - var(--panel-height) * 2);
  padding: 24px;
  margin: 24px;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: 16px;

  &[data-auth='true'] {
    min-height: calc(100dvh - var(--panel-height) * 3);
  }
}

@media (max-width: 960px) {
  .content {
    min-height: calc(100dvh - var(--panel-height));
    padding: 16px 12px;
    margin: 0;
    border: none;
    border-radius: 0;

    &[data-auth='true'] {
      min-height: calc(100dvh - var(--panel-height) * 2);
    }
  }
}

:global(.dark) {
  .main {
    background-color: var(--color-gray-dark-extra);
  }

  .content {
    background-color: var(--color-black);
    border: none;
  }
}
