$side-padding: 0;

body {
  @extend .theme--dark;

  @include breakpoint("wide") {
    background-image: url('//assets.queue-it.net/audk/userdata/au-queue-it-background.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 42rem;
  }
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: start;

  @include breakpoint("medium") {
    justify-content: center;
  }
}

#main {
  @include set-colors("background");
  @extend .theme--normal;
  width: auto;
  max-width: 36rem;
  min-height: 100vh;

  @include breakpoint("medium") {
    min-height: 0;
  }
}

#main-top {
  padding: spacing(-2) spacing($side-padding);
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  align-items: start;
  @include set-colors("background-secondary");

  @include breakpoint("medium") {
    flex-direction: row;
    justify-content: end;
  }

  #main-top-message {
    flex: 1 1 auto;

    p {
      @include set-font(-1, "single"); 

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  #language-selector {
    flex: 0 0 auto;
    align-self: end;
    display: flex; //Note: you need to add !important here, to see the language selector on the delphinus demo site
    align-items: center;
    margin-left: spacing(-2);
    margin-top: spacing(-5, $times: -1); //this makes the label align with #main-top-message
    margin-bottom: spacing(-4);

    @include breakpoint("medium") {
      margin-bottom: spacing(-5, $times: -1); //prevents additional whitespace below the select, when also setting a negative margin-top
      align-self: start;
    }

    label {
      @include set-font(-1, "single");
      margin-right: spacing(-4);
    }

    select {
      display: block;
      @include set-font(-1, "single");
      @include set-colors("background");
      border: none;
      border-radius: 0;
      padding: spacing(-5) spacing(-4);
      box-shadow: $shadow-style-center color("shadow");
    }
  }
}

#main .c {
  padding: spacing(-1) spacing($side-padding) spacing(0) spacing($side-padding);
  width: auto;

  #content {
    #header {
      padding: 0;
      margin-bottom: spacing(-1);

      .logo {
        text-align: left;
        margin-bottom: spacing(-3);
      }

      h1 {
        @include set-font($typography-h1-fontsize - 1, "single", $weight: "bold");
        color: color("foreground");
      }

      #headerparagraph {
        color: color("foreground");
        @include set-font(0, "single", $weight: "regular");
        margin-top: spacing(-2);
      }

      #whatisthis {
        color: color("foreground");
        @include set-font(-1, "single", $weight: "regular");
        padding: 0;
        margin-top: spacing(-4);

        a {
          @extend .a--text-link
        }
      }

      #detailExpander {
        margin-bottom: spacing(-1);

        & > span {
          @include set-font(0, "single", $weight: "regular");
          color: color("foreground-theme");
          text-decoration: none;

          @include icon-style {
            @include set-icon("expand");
            margin-right: spacing(-5);
          }

          &[aria-expanded="true"] {
            @include set-icon("collapse", $include-pseudo: "before");
          }

          &:focus {
            outline: none;
          }
        }

        #expandableDetails {
          @include set-font(0, "multiple", $weight: "regular");
          color: color("foreground");
        }
      }
    }

    //message about queue not open yet
    .warning-box {
      .beforeElement {
        @include set-colors("background-secondary");
        @include set-font(0, "single");
        margin: 0;
        padding: spacing(-2) spacing(-1);
        margin-bottom: $width-border;
      }
    }

    a.btn {
      @extend .button;
      background-image: none;
      text-shadow: none;
    } 

    .processbar-box {
      position: relative; //for blinking dot
      @include set-colors("background-secondary");
      @include set-font(-1, "single");
      text-align: left;
      margin: 0;
      padding: spacing(-2) spacing(-1);
      padding-right: spacing(-1, $add: font-size(1)); //to make text not clash with blinking dot

      .holder {
        color: color("foreground-secondary");
        
        .larger {
          @include set-font(0, "single", "regular");
          color: color("foreground");
        }
      }

      .hasCountdown {
        @include set-font(1, "single", $weight: "bold");
        color: color("foreground");
        text-align: left;
      }
    }
  }

  #footer {
    width: auto;
    max-width: none;
    margin: 0;
    margin-top: spacing(-1);
    padding: 0;
    display: flex;
    align-items: end;

    #footer-direct-link {
      @include set-font(-1, "single");
      color: color("foreground-secondary");
      padding: 0;
      flex: 1 1 auto;
      text-align: left;

      button {
        @include set-font(-1, "single");
        color: color("foreground-secondary");
        padding-right: spacing(-5);
      }
    }

    #footer-queueit-link {
      flex: 0 0 auto;
      svg {
        display: block;

        .footer-logo-svg-path {
          fill: color("foreground-secondary");
        }
      }
    }
  }
}

#MainPart_lbManualUpdateWarning {
  @include set-font(0, "single");
  @include set-colors("utility-warning-background");
  padding: spacing(-2) spacing(-1);
  text-shadow: none;
  margin: 0;
  border-radius: 0;
  border: none;
  border-left: $width-border-utility solid color("utility-warning");
}

//the blinking dot
.processbar {
  position: absolute;
  bottom: spacing(-2);
  right: spacing(-2);
  margin: 0;
  width: auto;

  #defaultViewPb1 {
    width: auto;
    height: auto;
  }

  span {
    background: none;
    width: auto;
    height: auto; 
    display: block;
    width: font-size(1);
    height: font-size(1);
    overflow: hidden;

    &::before {
      content: "";
      display: block;
      width: font-size(1);
      height: font-size(1);
      background-color: color("background");
      border-radius: 50%;
    }
  }

  .active span {
    margin: 0;

    &::before {
      background-color: color("utility-confirm");
    }
  }
}

.progressbar {
  position: relative; //for border behind progressbar
  border: none;
  background-color: transparent;
  border-radius: 0;
  font-size: font-size(-1);
  height: spacing(-5, $times: 2, $add: line-height("single", $include-calc: false));
  margin-bottom: $width-border;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: $width-border dotted color("border");
  }

  .progress {
    background-color: color("theme");
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: spacing(-4);
    min-width: spacing(-4, $times: 2, $add: 20px); //20px is width of running man

    &.updated {
      background-image: none;
    }

    .runner {
      position: static;
    }
  }
}

.time-box {
  @include set-colors("utility-attention-background");
  border-left: $width-border-utility solid color("utility-attention");
  margin: 0;

  .frame {
    padding: spacing(-2) spacing(-1);

    h2 {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");

      & + p {
        margin-top: 0;
      }
    }

    p {
      margin: spacing(-5) 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}