$fxl-gray: #263238;
$fxl-orange: #ff6e40;

@use "@material/theme" with (
  $primary: $fxl-orange,
  $on-primary: $fxl-gray
);

@use "@material/button/styles" as button-styles;
@use "@material/button/mixins" as button-mixins;
@use "@material/chips/styles" as chip-styles;
@use "@material/icon-button/icon-button";
@use "@material/linear-progress";
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/typography/mdc-typography";

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  @include icon-button.core-styles;

  display: flex;
  flex-direction: column;

  main {
    @include linear-progress.core-styles;
    
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem;

    header {
      ul {
        align-content: center;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          margin: 0 0.25em;

          button.active-set {
            @include button-mixins.filled-accessible($fxl-gray);
          }
        }
      }
    }

    article {
      display: flex;
      flex: 1;
      justify-content: space-around;
      text-align: center;
    }

    .visually-hidden {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      
      &:focus + label {
        outline: thin dotted;
      }
      
      &:focus-within + label {
        outline: thin dotted;
      }
    }
  }

  footer {
    background-color: $fxl-orange;
    font-size: smaller;
    text-align: center;
  }
}