$feature-flags: (
  enable-css-custom-properties: true,
);
$css--font-face: false;
@import "~@carbon/themes/scss/themes";
$custom-property-prefix: "cds";
$carbon--theme: $carbon--theme--g10;
@include carbon--theme();

bx-code-snippet,
bx-tabs,
bx-inline-notification,
dds-image-with-caption,
bx-code-snippet,
bx-header,
bx-btn,
bx-tooltip,
bx-tooltip-definition,
bx-structured-list,
cds-modal {
  @include carbon--theme($carbon--theme--g10, true);
}

cds-modal cds-modal-body {
  img,
  video {
    max-width: 100%;
    height: auto;
    max-height: 100%;
    width: auto;
    margin: 0 auto;
    display: block;
  }
}

html.dark {
  @include carbon--theme($carbon--theme--g90, true);

  bx-code-snippet,
  bx-tabs,
  //bx-inline-notification,
  dds-image-with-caption,
  bx-code-snippet,
  bx-header,
  bx-btn,
  bx-tooltip,
  bx-tooltip-definition,
  bx-structured-list,
  cds-modal {
    @include carbon--theme($carbon--theme--g90, true);
  }

  #footer {
    @include carbon--theme($carbon--theme--g10, true);
    //background-color: var(--cds-ui-05);
  }

  bx-side-nav {
    @include carbon--theme($carbon--theme--g90, true);
    background-color: $inverse-01;
    color: $text-01;
    border-color: $text-01;
  }

  bx-side-nav-menu::part(title) {
    @include carbon--theme($carbon--theme--g90, true);
    color: $text-01;
  }
  bx-side-nav-menu::part(expando-icon) {
    @include carbon--theme($carbon--theme--g90, true);
    fill: $text-01;
  }
  bx-side-nav-menu::part(expando):hover,
  bx-side-nav-menu[active]::part(expando) {
    @include carbon--theme($carbon--theme--g90, true);
    background-color: $ui-01;
  }
  bx-side-nav-menu-item::part(title) {
    @include carbon--theme($carbon--theme--g90, true);
    color: $text-01;
  }
  bx-side-nav-menu-item::part(link):hover,
  bx-side-nav-menu-item[active]::part(link) {
    @include carbon--theme($carbon--theme--g90, true);
    background-color: $ui-01;
  }

  bx-side-nav-link::part(link):hover,
  bx-side-nav-link[active]::part(link) {
    @include carbon--theme($carbon--theme--g90, true);
    background-color: $ui-01;
  }
  bx-side-nav-link::part(title) {
    @include carbon--theme($carbon--theme--g90, true);
    color: $text-01;
  }
  bx-side-nav-link {
    @include carbon--theme($carbon--theme--g90, true);
    svg {
      fill: $text-02;
    }
  }

  bx-tooltip-definition {
    --cds-interactive-01: var(--cds-text-02);
    --cds-interactive-04: var(--cds-text-01);
  }

  .almanac-tile svg {
    @include carbon--theme($carbon--theme--g90, true);
    fill: $text-02;
  }

  .stat-tile svg.icon-link {
    @include carbon--theme($carbon--theme--g90, true);
    fill: $text-02;
  }

  .bx-ce-demo-devenv--tab-panels {
    background: $ui-01;
  }

  div.diagram {
    //background: $ui-02;
    &.plotly {
      svg.main-svg {
        background: transparent !important;
      }
      g.legend {
        rect.bg {
          fill: transparent !important;
        }
      }
      g.polarsublayer.plotbg {
        path {
          fill: transparent !important;
        }
      }
    }
  }

  .noaa-report-link {
    color: $link-01;
  }

  // Forecast.
  .forecast-tile
    .forecast
    bx-structured-list
    bx-structured-list-row
    bx-structured-list-cell {
    .temphi {
      color: $text-02;
    }
    .templo {
      color: $text-02;
    }
  }

  .forecast-tile,
  .dwd-forecast,
  .dwd-warning {
    a {
      color: $link-01;
    }
  }

  .dwd-forecast {
    .carbon-icons {
      img {
        filter: invert(0.8);
      }
    }
  }
}

#header-global {
  margin-inline-start: auto;
  display: flex;
  bx-btn {
    @include carbon--theme($carbon--theme--g90, true);
    svg {
      fill: var(--cds-icon-03);
    }
  }
}

.hidden {
  display: none !important;
}

@import "~@carbon/layout/scss/breakpoint";
@import "~@carbon/layout/scss/convert";
$carbon--grid-breakpoints: (
  sm: (
    columns: 4,
    margin: 0,
    width: carbon--rem(320px),
  ),
  md: (
    columns: 8,
    margin: carbon--rem(16px),
    width: carbon--rem(672px),
  ),
  lg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1056px),
  ),
  xlg: (
    columns: 16,
    margin: carbon--rem(16px),
    width: carbon--rem(1312px),
  ),
  max: (
    columns: 16,
    margin: carbon--rem(24px),
    width: carbon--rem(1920px),
  ),
);
@import "~carbon-components/scss/globals/scss/styles.scss";
@import "~@carbon/colors/scss/mixins";
@include carbon--colors();

@import "./fonts";

// @see https://www.carbondesignsystem.com/guidelines/typography/code/
@import "~@carbon/type/scss/type";

@import "~@carbon/type/scss/classes";
@include carbon--type-classes();
@import "~@carbon/type/scss/styles";

@include carbon--type-reset();

.diagram.plotly {
  g.hoverlayer {
    display: none;
  }
  #hoverInfoWindRose {
    position: absolute;
  }
}

body,
html {
  overflow-x: hidden;
}

// Side nav width is $spacing-09.
bx-header ~ bx-side-nav {
  margin-top: 3rem;
  height: calc(100% - 3rem);
}

bx-side-nav {
  z-index: 1400;
  bx-side-nav-items {
    overflow-y: auto;
  }
  @include carbon--breakpoint-down(lg) {
    z-index: 1600;
  }
}

body.theme-classic {
  bx-side-nav {
    z-index: 1600;
  }
}

.bx--header__name {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  white-space: nowrap;
}

bx-header-name {
  svg,
  img.logo {
    height: auto;
    max-width: 32px;
    margin-right: $spacing-03;
  }
  span.bx--header__name--prefix {
    padding-right: $spacing-02;
  }
  @include carbon--breakpoint-down(lg) {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100vw - 72px);
    white-space: nowrap;
    display: flex;
  }
}

.bx--content {
  margin-top: $spacing-09;
  @include carbon--breakpoint-down(lg) {
    padding-left: 0;
    padding-right: 0;
  }
}

bx-structured-list-cell,
.bx--structured-list-td {
  padding: 0.5rem 0.5rem 0.5rem;
}

.bx--col,
.bx--col-sm-4,
.bx--col-md-4,
.bx--col-lg-6 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.bx--row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.custom-content {
  &.top {
    margin-bottom: $spacing-05;
  }
  &.bottom {
    margin-bottom: $spacing-05;
  }
}

main.user-page {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: $spacing-02;
  }
  p,
  ol,
  ul {
    max-width: 60rem;
    margin-bottom: $spacing-05;
    b {
      font-weight: bold;
    }
    bx-code-snippet {
      margin-bottom: 0 !important;
    }
    li {
      line-height: 1.25rem;
    }
  }
  .bx-ce-demo-devenv--tab-panels,
  bx-tabs {
    max-width: 40rem;
  }
  bx-code-snippet {
    margin-bottom: $spacing-05;
  }
  dds-image-with-caption {
    max-width: 60rem;
  }
  ol {
    list-style: auto;
    padding-left: $spacing-05;
    li > * {
      margin-bottom: 0;
    }
  }
  a {
    color: $link-01;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

header.page-header {
  margin-bottom: $spacing-07;
  h1 {
    @include carbon--type-style("expressive-heading-06");
  }
  h2 {
    @include carbon--type-style("expressive-heading-03");
  }
  h3 {
    margin-top: $spacing-02;
    @include carbon--type-style("expressive-heading-01");
  }
}

header.section-header {
  margin-top: $spacing-07;
  margin-bottom: $spacing-07;
  h2 {
    @include carbon--type-style("expressive-heading-06");
  }
  h3 {
    @include carbon--type-style("expressive-heading-03");
  }
}

.bx-ce-demo-devenv--tab-panels {
  flex: 1;
  padding: 1rem 1rem 0rem 1rem;
  align-self: stretch;
  background-color: white;
  margin-bottom: $spacing-05;
  > div {
    padding-bottom: 1rem;
  }
  #panel-climatogram {
    div.diagram.combined {
      height: 400px;
    }
  }
}
.climatological-tile {
  bx-tooltip-body {
    top: 25px !important;
  }
  bx-structured-list-header-cell {
    span.hide-mobile {
      @include carbon--breakpoint-down(md) {
        display: none;
      }
    }
  }
  bx-structured-list-cell {
    span {
      display: none;
      sub {
        font-size: 0.75em;
      }
    }
    @include carbon--breakpoint-up(md) {
      span {
        display: inline;
      }
      bx-tooltip {
        display: none;
      }
    }
  }
}

.clim-days-extended-table {
  @include carbon--breakpoint-up(xlg) {
    display: block;
    max-width: 75%;
  }
}

.obs-stat-tile {
  margin-bottom: $spacing-05;
  h3 {
    @include carbon--type-style("expressive-heading-02");
  }
  > .bx--row > .bx--col {
    @media screen and (max-width: 465px) {
      overflow-x: hidden;
      margin-right: 0.5rem;
      padding-right: 0 !important;
    }
  }
  bx-structured-list {
    bx-structured-list-head {
      bx-structured-list-header-row {
        bx-structured-list-header-cell {
          &:nth-child(1) {
            @media screen and (max-width: 465px) {
              display: none;
            }
          }
        }
      }
    }
    bx-structured-list-row {
      bx-structured-list-cell {
        span.date {
          display: block;
          @include carbon--type-style("label-01");
        }
        &:nth-child(1) {
          @include carbon--breakpoint-down(md) {
            font-size: 12px;
          }
          @media screen and (max-width: 465px) {
            &:not(.keep-cell) {
              display: none;
            }
          }
        }
      }
    }
    div.mobile-header {
      position: relative;
      padding: 12px 0 22px 8px;
      border-bottom: 1px solid #e0e0e0;
      width: 600%;
      font-size: 0.85em;
      .label {
        position: absolute;
        font-weight: 600;
      }
      @media screen and (min-width: 466px) {
        display: none;
      }
    }
    @include carbon--breakpoint-down(md) {
      bx-structured-list-head bx-structured-list-header-cell {
        font-size: 12px;
      }
    }
  }
}

a.stat-tile-link,
a.stat-tile-link * {
  text-decoration: none;
  color: inherit;
}

.stat-tile {
  margin-bottom: $spacing-05;
  height: calc(100% - #{$spacing-05});
  transition: background-color 350ms ease;
  bx-tooltip-definition {
    padding-bottom: $spacing-01;
  }
  > .bx--row {
    position: relative;
    svg.icon-link {
      position: absolute;
      right: 0;
      top: 0;
      width: 24px;
    }
    align-items: center;
    .label {
      @include carbon--type-style("expressive-heading-02");
    }
    .value {
      display: flex;
      align-items: center;
      svg,
      img {
        max-width: 32px;
        display: inline-block;
        margin-right: $spacing-02;
        fill: $text-02;
      }
      span.stat-wind-dir {
        svg {
          max-width: 24px;
          vertical-align: text-bottom;
          margin-right: 0;
          transition: transform 350ms ease;
        }
      }
      > span {
        @include carbon--type-style("productive-heading-05");
        @include carbon--breakpoint-up(md) {
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 100%;
          overflow: hidden;
        }
        span:not(.raw) {
          @include carbon--type-style("productive-heading-01");
        }
      }
    }
    .stat-label {
      @include carbon--type-style("label-01");
    }
    .stat-value {
      @include carbon--type-style("productive-heading-01");
      display: flex;
    }
  }
  .bx--row ~ .bx--row {
    margin-top: $spacing-04;
  }
}

@mixin fullscreen {
  .maximize {
    transition: all 250ms ease;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: -2rem;
    padding: $spacing-02;
    box-sizing: content-box;
    fill: $text-02;
    &:hover {
      background: $background-active;
    }
    @include carbon--breakpoint-down(lg) {
      opacity: 1;
    }
  }
  .fullscreen {
    display: none;
    &.fullscreen-enabled {
      display: block;
      padding: $spacing-08 !important;
      background: white;
      .maximize {
        position: absolute;
        top: $spacing-04;
        right: $spacing-08;
        z-index: 10;
        @include carbon--breakpoint-down(lg) {
          right: $spacing-04;
        }
      }
      @include carbon--breakpoint-down(lg) {
        padding: $spacing-04 !important;
      }
    }
  }
}

.diagram-tile {
  margin-bottom: $spacing-05;
  &.gauge {
    .diagram {
      // height: 200px;
      // @include carbon--breakpoint-up(md) {
      //   height: 300px;
      // }
      aspect-ratio: 12 / 8.5;
      height: auto;
    }
  }
  &.combined {
    .label {
      span {
        display: flex;
        align-items: center;
      }
    }
  }
  .diagram {
    position: relative;
    @include fullscreen();
    .diagram-legend {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: start;
      margin-top: $spacing-04;
      .legend-item {
        display: flex;
        align-items: center;
        margin-right: $spacing-04;
        margin-bottom: $spacing-02;
        .legend-color {
          margin-right: 5px;
        }
        .legend-label {
          font-size: 11px;
        }
      }
    }
  }
  &:hover {
    .maximize {
      opacity: 1;
    }
  }
  &:fullscreen {
    .bx--row,
    .bx--col {
      height: 100%;
    }
    .value {
      height: 95%;
      .diagram {
        height: 100% !important;
      }
    }
  }
}

.diagram-tile,
.calendar-diagram {
  .label {
    @include carbon--type-style("expressive-heading-02");
    display: flex;
    align-items: center;
    img,
    svg {
      margin-right: $spacing-02;
      fill: $text-02;
      max-width: 32px;
      height: auto;
    }
  }
}

.calendar-diagram-clim-wrap {
  position: relative;
  @include fullscreen();
  .maximize {
    top: 0;
  }
  &:hover {
    .maximize {
      opacity: 1;
    }
  }
}

.tile-radar-forecast {
  img,
  video {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
  }
}

div[id^="panel"] .tile-radar-forecast {
  min-height: auto;
}

.radar-container .bx-ce-demo-devenv--tab-panels {
  > div {
    padding-bottom: 0;
  }
}

.forecast-tile {
  @include carbon--breakpoint-down(xlg) {
    margin-bottom: $spacing-06;
  }
  .forecast {
    h3 {
      @include carbon--type-style("expressive-heading-03");
    }
    > p {
      @include carbon--type-style("body-long-01");
    }
    .issued {
      @include carbon--type-style("helper-text-01");
    }
    & ~ .forecast {
      margin-top: $spacing-06;
    }
    .precip-main + .precip-detail {
      margin-top: $spacing-04;
    }
    div.precip-detail {
      display: flex;
      align-items: center;
      svg {
        max-width: 16px;
        height: auto;
        margin-right: 5px;
      }
    }
    .windgust {
      display: flex;
      align-items: center;
      margin-top: 0.75em;
      svg {
        max-width: 24px;
        margin-right: 5px;
      }
    }
    // bx-structured-list-row,
    // bx-structured-list-header-row {
    //   @include carbon--breakpoint-down(md) {
    //     bx-structured-list-cell,
    //     bx-structured-list-header-cell {
    //       display: none;
    //     }
    //     bx-structured-list-cell:nth-of-type(-n + 3),
    //     bx-structured-list-header-cell:nth-of-type(-n + 3) {
    //       display: table-cell;
    //     }
    //   }
    // }
  }
}

bx-structured-list.forecast-list,
.dwd-forecast .bx--structured-list {
  display: block;
  margin-bottom: -4rem;
  // Legend max-width for first child.
  .bx--structured-list-tbody,
  bx-structured-list-body {
    .bx--structured-list-row,
    bx-structured-list-row {
      .bx--structured-list-td:first-child,
      bx-structured-list-cell:first-child {
        max-width: 9rem;
        white-space: initial;
        padding-right: 1.5rem;
      }
    }
  }
  bx-structured-list-body,
  .bx--structured-list-tbody {
    bx-structured-list-cell[class*="index"],
    .bx--structured-list-td[class*="index"] {
      font-family: carbon--font-family("mono"), monospace;
    }
  }
  bx-structured-list-header-cell,
  .bx--structured-list-th {
    .day {
      font-weight: 400;
    }
  }
  bx-structured-list-row,
  .bx--structured-list-row {
    bx-structured-list-cell,
    .bx--structured-list-td {
      sub {
        @include carbon--type-style("helper-text-01");
      }
      .temphi {
        color: #d5202a;
      }
      .templo {
        color: #0053ae;
      }
      .unit-label {
        @include carbon--type-style("helper-text-01");
      }
      svg,
      img {
        display: block;
        width: 42px;
        height: 42px;
        fill: $text-02;
      }
    }
    &.rain {
      svg {
        width: 32px;
        height: 32px;
        margin-top: $spacing-02;
        margin-bottom: $spacing-02;
      }
    }
  }
}

.dwd-forecast {
  overflow: hidden;
  @include carbon--breakpoint-down(lg) {
    h3 {
      margin-bottom: $spacing-06;
    }
  }
  .bx--structured-list {
    margin-bottom: 0;
    display: table;
  }
  .bx--content-switcher {
    border: 1px solid $text-02;
    border-radius: 0.25rem;
  }
}

.dwd-warning {
  img {
    max-width: 50px;
    width: 50px;
    margin-right: $spacing-03;
    height: 50px;
    flex: 1 0 0;
  }
  .warning-header {
    flex: 1 1 0;
  }
  .dwd-warning-row + .dwd-warning-row {
    margin-top: $spacing-06;
  }
}

.statistics-day-select {
  .bx--list-box__field {
    button {
      box-sizing: border-box;
      padding: 0;
      border: 0;
      margin: 0;
      font-family: inherit;
      font-size: 100%;
      vertical-align: baseline;
      display: inline-block;
      padding: 0;
      border: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: 0 0;
      cursor: pointer;
      text-align: start;
      position: absolute;
      right: 1rem;
      display: flex;
      width: 1.5rem;
      height: 2.25rem;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      svg {
        fill: var(--cds-icon-primary, #161616);
      }
      & + button {
        right: 2.5rem;
      }
    }
  }
}

.almanac-tile {
  margin-bottom: $spacing-05;
  .label {
    @include carbon--type-style("expressive-heading-04");
    display: flex;
    align-items: end;
    margin-bottom: $spacing-04;
    justify-content: space-between;
    svg {
      max-width: 128px;
      display: block;
    }
    &.small {
      @include carbon--type-style("label-01");
      margin-bottom: 0;
      justify-content: unset;
      align-items: center;
    }
  }
  .bx--col.value {
    display: flex;
    align-items: center;
    svg {
      margin-right: $spacing-04;
    }
  }
  .value {
    @include carbon--type-style("productive-heading-01");
  }
  &.detail {
    .bx--row.stats {
      margin-bottom: $spacing-04;
    }
  }
}

.pyephem {
  margin-top: $spacing-10;
}

.diagram-tooltip,
.diagram text,
.calendar-diagram text,
.diagram-legend {
  font-family: carbon--font-family("mono"), monospace;
}

.diagram-tooltip {
  background: $interactive-02;
  box-shadow: 0 2px 6px $interactive-02;
}

.diagram text,
.calendar-diagram text {
  fill: $text-01 !important;
}

.windrose-tooltip {
  display: none;
  z-index: 10;
  transition: left 300ms ease, top 300ms ease;
}

.diagram {
  height: 220px;
  @include carbon--breakpoint-up(md) {
    height: 325px;
  }
  @include carbon--breakpoint-up(lg) {
    height: 325px;
  }
  @include carbon--breakpoint-up(xlg) {
    height: 250px;
  }
  @include carbon--breakpoint-up(max) {
    height: 250px;
  }
}

#footer {
  padding: 2rem;
  background-color: $background-inverse;
  color: $text-inverse;
  a {
    color: $link-inverse;
  }
  .footnote {
    margin-top: $spacing-06;
  }
  .icon-link {
    display: block;
    margin: $spacing-06 0 0 0;
    svg {
      height: auto;
      max-width: 32px;
      path {
        fill: $text-inverse;
      }
    }
  }
}

.data-table-tile {
  padding: 0;
}
.bx--data-table--short .bx--table-header-label {
  white-space: nowrap;
}

.main.bx--content {
  position: relative;
  z-index: 1500;
}

@include carbon--breakpoint-up(lg) {
  .main.bx--content,
  #footer {
    margin-left: 16rem;
    padding-left: 0;
    padding-right: 1rem;
  }
}

.show-small {
  @include carbon--breakpoint-up(lg) {
    display: none;
  }
}

.sidebar-heading {
  pointer-events: none;
  cursor: default;
}

.webcam-tile {
  video {
    max-width: 100%;
    height: auto;
  }
}

.climatological-day-table {
  overflow-x: auto;
}

body.theme-classic {
  div.bx--grid.bx--grid--full-width {
    @include carbon--breakpoint-up(lg) {
      padding-right: 0;
    }
  }
  .layout-col,
  .bx--tile.forecast-tile {
    margin-bottom: $spacing-05;
  }
  .diagram {
    height: 220px;
    @include carbon--breakpoint-up(md) {
      height: 300px;
    }
    @include carbon--breakpoint-up(lg) {
      height: 250px;
    }
    @include carbon--breakpoint-up(xlg) {
      height: 225px;
    }
    @include carbon--breakpoint-up(max) {
      height: 225px;
    }
  }
  .section-header {
    margin-top: $spacing-03;
    margin-bottom: $spacing-05;
    h2 {
      @include carbon--type-style("expressive-heading-04");
    }
  }
  .main.bx--content,
  #footer {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;

    @include carbon--breakpoint-up(md) {
      margin-left: 2rem;
      padding-right: 0rem;
      margin-right: -1rem;
    }
    @include carbon--breakpoint-up(lg) {
      margin-left: 2rem;
      padding-right: 1rem;
      margin-right: 0;
    }
  }
  // .forecast {
  //   bx-structured-list {
  //     bx-structured-list-header-cell,
  //     bx-structured-list-cell {
  //       &:nth-child(n + 6) {
  //         @media screen and (min-width: 1312px) and (max-width: 1500px) {
  //           display: none;
  //         }
  //       }
  //     }
  //   }
  // }
}

body.theme-alternative {
  @include carbon--breakpoint-down(lg) {
    .main.bx--content,
    #footer {
      padding-left: 0;
      margin-left: 0;
      padding-right: 0;
    }
  }
}
