@import 'utils';

html {
  // Small width
  @media (max-width: $media--small) {
    #root {
      grid-template-areas: "header" "main";
      grid-template-columns: auto;
      grid-template-rows: min-content auto;
    }

    .main {
      padding-top: calc(var(--titlebar--height) * 0.5);
    }

    &.header--open {
      // Make the header full height
      .header {
        box-sizing: border-box;
        height: 100vh;
        overflow-x: auto; // Make it scrollable
        padding-top: calc(var(--titlebar--height) * 0.5);
      }

      // Hide the main content
      .main {
        display: none;
      }
    }

    &:not(.header--open) {
      .header {
        backdrop-filter: blur(4em);
        padding: calc(var(--titlebar--height) * 0.5) 0 calc(var(--titlebar--height) * 0.5) 0;

        // Stays at the top
        top: 0;
        position: sticky;
        z-index: 1000;
      }

      // Hide the header content
      .header__content,
      .header__bottom {
        display: none;
      }
    }

    .header {
      > *:last-child {
        padding-bottom: calc(var(--header-padding-v) / 2);
      }

      > *:not(:first-child) {
        padding-top: calc(var(--header-padding-v) / 2);
      }

      .header__actions {
        flex-direction: row;

        > * {
          &.header__actions__toggle {
            flex-grow: 1;
          }

          &:not(.header__actions__toggle) {
            flex-grow: 2;
          }
        }

        // Add spaces around actions
        > *:not(:last-child) {
          margin-right: calc(var(--header-padding-v) / 2);
        }
      }
    }
  }

  // Full width
  @media (min-width: $media--small) {
    #root {
      grid-template-areas: "header main";
      grid-template-columns: var(--header-width) auto;
      grid-template-rows: auto;
    }

    // Make content to scroll
    .main {
      box-sizing: border-box;
      height: 100vh;
      padding-top: calc(var(--titlebar--height) * 1.25);
    }

    // Header always open, so we need to make sure it is full height
    .header {
      box-sizing: border-box;
      height: 100vh;
      overflow-x: auto; // Make it scrollable
      padding-top: calc(var(--titlebar--height) * 1.25);

      > *:last-child {
        padding-bottom: var(--header-padding-v);
      }

      > *:not(:first-child) {
        padding-top: var(--header-padding-v);
      }

      .header__actions {
        flex-direction: column;
        align-items: stretch;

        // Add spaces around actions
        > *:not(:last-child) {
          margin-bottom: calc(var(--header-padding-v) / 2);
        }
      }

      // Hide the toggle button
      .header__actions__toggle {
        display: none;
      }
    }
  }
}

#root {
  display: grid;
  min-height: 100vh;
}

.header {
  --header--background-color: var(--background-bold);

  background-color: var(--header--background-color);
  border-right: 1px solid var(--background-muted);
  display: flex;
  flex-direction: column;
  grid-area: header;
  justify-content: space-between;

  > * {
    margin-left: var(--header-padding-h);
    margin-right: var(--header-padding-h);
  }

  .header__actions {
    display: flex;
  }

  .header__content {
    flex-grow: 1;
  }

  .header__bottom {
    background: linear-gradient(0deg, var(--header--background-color) 50%, transparent 100%);

    // Stays at the bottom
    bottom: 0;
    position: sticky;
    z-index: 900;

    // Delimit the content to limit wrapping
    .header__bottom__block {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      // Add spaces blocks
      &:not(:last-child) {
        margin-bottom: calc(var(--header-padding-v) / 4);
      }

      // Add spaces around buttons
      > *:not(:last-child) {
        margin-right: calc(var(--header-padding-v) / 4);
      }
    }
  }
}
