@use "themer";
@use "sass:color";
@use "/node_modules/bootstrap/scss/bootstrap";
@import "/node_modules/bootstrap-icons/font/bootstrap-icons.css"; // @use introduces errors. Perhaps webpack is missing a loader?

header > nav {
  @extend .navbar;
  @extend .navbar-expand-lg;

  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;

  border-bottom-style: solid;
  border-bottom-width: 1px;

  @include themer.themed {
    border-bottom-color: color.adjust(themer.color-of("navbar"), $lightness: 10%);
    background-color: color.change($color: themer.color-of("navbar"), $alpha: 0.75);
  }

  .navbar-brand {
    @include themer.themed {
      color: themer.color-of("navbar-brand");
    }
  }

  .nav-link {
    @include themer.themed {
      color: themer.color-of("navbar-link");
    }
    &.active {
      @include themer.themed {
        color: themer.color-of("navbar-active");
      }
    }
  }

  .navbar-toggler {
    @include themer.themed {
      color: color.invert(themer.color-of("navbar"), 100%);
    }
  }
}

.pages {
  display: flex;
  flex-grow: 1;
  flex-direction: column;

  .page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
  }
}

.contained-title {
  text-align: center;
  max-width: 50%;
}

.panels {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  width: 100%;
  .panel {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  @include themer.themed {
    color: themer.color-of("text");
    background-color: themer.color-of("background");
  }
}