:root body {
   /*  Typography  */
   --kompassi-font: 'Lato', 'Helvetica', 'Arial', sans-serif;
   --kompassi-font-size: 16px;
   --kompassi-line-height: 1.3em;

   /*  Colors  */
   --kompassi-hue: 205deg;
   --kompassi-fg-lightness: 13%;
   --kompassi-fg: hsla(0deg, 0%, var(--kompassi-fg-lightness), 100%);
   --kompassi-fg-10: hsla(0deg, 0%, var(--kompassi-fg-lightness), 10%);
   --kompassi-fg-25: hsla(0deg, 0%, var(--kompassi-fg-lightness), 20%);
   --kompassi-fg-50: hsla(0deg, 0%, var(--kompassi-fg-lightness) 50%);
   --kompassi-fg-75: hsla(0deg, 0%, var(--kompassi-fg-lightness), 75%);
   --kompassi-fg-invert: hsla(0deg, 0%, 100%, 100%);
   --kompassi-bg: rgb(255, 255, 255); /* Need to use rgb() value! */
   --kompassi-bg-alt: hsl(var(--kompassi-hue), 30%, 97%);
   --kompassi-lightness-threshold: 0.6;

   /*  Palette  */
   --kompassi-palette-0: hsl(var(--kompassi-hue), 20%, 10%);
   --kompassi-palette-1: hsl(var(--kompassi-hue), 60%, 20%);
   --kompassi-palette-2: hsl(var(--kompassi-hue), 60%, 35%);
   --kompassi-palette-3: hsl(var(--kompassi-hue), 40%, 60%);
   --kompassi-palette-4: hsl(var(--kompassi-hue), 50%, 90%);
   --kompassi-palette-5: hsl(var(--kompassi-hue), 10%, 95%);

   /*  Non-main palette colors  */
   --kompassi-link: hsl(var(--kompassi-hue), 80%, 40%);
   --kompassi-link-hover: hsl(var(--kompassi-hue), 90%, 20%);
   --kompassi-link-invert: hsl(var(--kompassi-hue), 80%, 60%);
   --kompassi-link-hover-invert: hsl(var(--kompassi-hue), 90%, 80%);
   --kompassi-indicator-bg: hsl(0deg 100% 40%);
   --kompassi-note-bg: hsl(60deg 100% 90%);

   /*  Common definitions  */
   --kompassi-box-shadow: 0 0 3px var(--kompassi-fg-10);
   --kompassi-radius: 0.3em;
   --kompassi-padding: 0.6em;
   --kompassi-padding-large: 1.5em;
   --kompassi-icon-size: 21px;
   --kompassi-modal-max-width: 1000px;

   @media screen and (width < 600px) {
      --kompassi-padding-large: 1em;
   }
}


/*
 *  Color scheme support
 *
 */

@media (prefers-color-scheme: dark) {
   :root body:not(.kompassi-color-scheme-light) {
      /* Colors */
      --kompassi-fg-lightness: 87%;
      --kompassi-fg-invert: #222;
      --kompassi-bg: hsl(var(--kompassi-hue) 5% 10%);

      /* Palette */
      --kompassi-palette-0: hsl(var(--kompassi-hue) 20% 15%);
      --kompassi-palette-1: hsl(var(--kompassi-hue) 70% 40%);
      --kompassi-palette-2: hsl(var(--kompassi-hue) 70% 25%);
      --kompassi-palette-3: hsl(var(--kompassi-hue) 40% 60%);
      --kompassi-palette-4: hsl(var(--kompassi-hue) 50% 15%);
      --kompassi-palette-5: hsl(var(--kompassi-hue) 10% 17%);

      /*  Non-main palette colors  */
      --kompassi-note-bg: hsl(50deg 100% 20%);

      [class*="kompassi-icon"]::before {
         filter: invert() !important;
         opacity: 1 !important;
      }

      .is-favorite .kompassi-icon-favorite::before,
      .kompassi-icon-favorite.active::before {
         filter: none !important;
      }

      .kompassi-provided {
         filter: invert() saturate(0%) brightness(200%);
      }
   }
}

:root body.kompassi-color-scheme-dark {
   --kompassi-fg-lightness: 87%;
   --kompassi-fg-invert: #222;
   --kompassi-bg: hsl(var(--kompassi-hue) 5% 10%);

   /*  Palette  */
   --kompassi-palette-0: hsl(var(--kompassi-hue) 20% 15%);
   --kompassi-palette-1: hsl(var(--kompassi-hue) 70% 40%);
   --kompassi-palette-2: hsl(var(--kompassi-hue) 70% 25%);
   --kompassi-palette-3: hsl(var(--kompassi-hue) 40% 60%);
   --kompassi-palette-4: hsl(var(--kompassi-hue) 50% 15%);
   --kompassi-palette-5: hsl(var(--kompassi-hue) 10% 17%);

   /*  Non-main palette colors  */
   --kompassi-note-bg: hsl(50deg 100% 20%);

   [class*="kompassi-icon"]::before {
      filter: invert() !important;
      opacity: 1 !important;
   }

   .is-favorite .kompassi-icon-favorite::before,
   .kompassi-icon-favorite.active::before {
      filter: none !important;
   }

   .kompassi-provided {
      filter: invert() saturate(0%) brightness(200%);
   }
}

/*
 *
 *
 */

.kompassi-integration {
	container-name: kompassi-integration;
	container-type: inline-size;
   position: relative;

   font-family: var(--kompassi-font);
   font-size: var(--kompassi-font-size);
   line-height: var(--kompassi-line-height);

   color: var(--kompassi-fg);

   &.fix-bg-contrast {
      --kompassi-bg: var(--kompassi-bg-alt);
      --kompassi-box-shadow: 0 0 3px var(--kompassi-fg-25);
   }

   a {
      &:is(:link, :visited) {
         color: var(--kompassi-link);
      }
   }

   * {
      font-family: var(--kompassi-font);
   }
}

/*
 *  Icons
 *
 */

.kompassi-icon-arrow-left::before { background-image: url("../images/icons/arrow_left.svg"); }
.kompassi-icon-arrow-right::before { background-image: url("../images/icons/arrow_right.svg"); }
.kompassi-icon-clear-filters::before { background-image: url("../images/icons/clear_filters.svg"); }
.kompassi-icon-close::before { background-image: url("../images/icons/close.svg"); }
.kompassi-icon-ellipsis::before { background-image: url("../images/icons/ellipsis.svg"); }
.kompassi-icon-favorite::before { background-image: url("../images/icons/favorite.svg"); }
.kompassi-icon-filter::before { background-image: url("../images/icons/filter.svg"); }
.kompassi-icon-list::before { background-image: url("../images/icons/list.svg"); }
.kompassi-icon-signup::before { background-image: url("../images/icons/signup.svg"); }
.kompassi-icon-timeline::before { background-image: url("../images/icons/timeline.svg"); }
.kompassi-icon-timetable::before { background-image: url("../images/icons/timetable.svg"); }

.kompassi-icon-favorite.active::before,
.is-favorite .kompassi-icon-favorite::before,
#kompassi_schedule[data-display="timeline"] .is-favorite .title::after { background-image: url("../images/icons/is_favorite.svg"); }

/*  Active button style is dark by default, make sure the icons are visible  */
[class*="kompassi-icon"].active:not(.kompassi-icon-favorite)::before { filter: invert(); }
[class*="kompassi-icon"].active::before { opacity: 1 !important; }

/*  Icons without button group parent  */
:not(.kompassi-button-group) > [class*="kompassi-icon"]::before {
   content: '';
   display: inline-block;
   height: 1.25em;
   width: 1.25em;
   margin-right: 0.5em;
   background-size: contain;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

/*
 *  Indicators
 *
 */

.kompassi-indicator:not(:empty) {
    display: inline-block;
    float: right;
    margin-left: var(--kompassi-padding);
    width: var(--kompassi-icon-size);
    height: var(--kompassi-icon-size);
    color: #fff;
    background-color: var(--kompassi-indicator-bg);
    text-align: center;
    border-radius: 9999px;
    align-content: center;
}

/*
 *  Notes
 *
 */

.kompassi-notes {
   &:not(:empty) {
      padding: 0.5em;
   	border-radius: var(--kompassi-radius);
   	box-shadow: var(--kompassi-box-shadow);
   	background-color: var(--kompassi-note-bg);
   	color: var(--kompassi-fg);
   	margin-bottom: 0.5em;
   }
   span {
      display: inline-block;
		margin-right: 1em;
   }

   /* TODO: Move to schedule.css? */
   .program-count {
      font-weight: 600;
   }
}


/*
 *  Footer
 *
 */

.kompassi-footer {
   margin: 1em 0;
   color: var(--kompassi-fg-75);

   :is(a) {
      text-decoration: none;

      &:is(:link, :visited) {
         color: var(--kompassi-link);
      }
      &:is(:hover, :active, :focus) {
         color: var(--kompassi-link-hover);
      }
   }

   .kompassi-integration.has-dark-background & {
      a {
         &:is(:link, :visited) {
            color: var(--kompassi-link-invert);
         }
         &:is(:hover, :active, :focus) {
            color: var(--kompassi-link-hover-invert);
         }
      }
      color: var(--kompassi-fg-invert);
   }

   .kompassi-contact {
      p {
         font-size: max(85%, 10pt);
         letter-spacing: 0.02em;
         font-weight: 600;
      }
   }
   .kompassi-logos {
      text-align: right;
      display: flex;
      grid-gap: var(--kompassi-padding-large);

      img {
         height: 50px;
         width: auto;

         .kompassi-integration.has-dark-background & {
            filter: invert(1) saturate(0);
         }
      }
   }

   @media screen and (width >= 800px) {
      display: grid;
      grid-template-columns: auto max-content;
      grid-gap: var(--kompassi-padding-large);
   }
}

/*
 *  Button groups
 *
 */

.kompassi-button-group {
	display: block;
   height: calc(var(--kompassi-line-height) + var(--kompassi-padding) *  2);

   > :is(a) {
      cursor: pointer;
      position: relative;
      display: inline-block;
      padding: var(--kompassi-padding);
      color: var(--kompassi-fg);
      background: var(--kompassi-bg);
      border-radius: var(--kompassi-radius);
      margin-right: var(--kompassi-padding);
      margin-bottom: var(--kompassi-padding);
      box-shadow: var(--kompassi-box-shadow);
      text-decoration: none;

      &:visited {
         color: var(--kompassi-fg);
      }

      &:is(:hover, :active, :focus) {
         color: var(--kompassi-palette-2);
      }

      &.active {
         color: #fff !important;
         background: var(--kompassi-palette-2) !important;
		}
   }

   &:is(.has-icon-and-label, .has-icon-only) {
      > a::before {
         content: '';
         display: inline-block;
         position: absolute;
         top: var(--kompassi-padding);
         left: var(--kompassi-padding);
         width: var(--kompassi-icon-size);
         height: var(--kompassi-icon-size);
         background-repeat: no-repeat;
         background-position: 50% 50%;
         background-size: contain;
         opacity: 0.5;
      }
   }

   &:is(.has-icon-and-label) {
      > a:is([class*="kompassi-icon"]) {
         padding-left: calc((var(--kompassi-padding) * 2) + var(--kompassi-icon-size));
      }
   }

   &:is(.has-icon-only) {
      > :is(a) {
         width: var(--kompassi-icon-size);
         height: var(--kompassi-icon-size);
         user-select: none;
      }
   }

   /* TODO? */
   @container kompassi-integration (width > 1px) {
      margin-right: var(--kompassi-padding);
      margin-bottom: var(--kompassi-padding);

      > :is(a),
      > .kompassi-dropdown-menu > a {
         border-radius: 0;
			margin-right: 0;
			margin-bottom: 0;
      }

      > a:not(:last-child),
      > .kompassi-dropdown-menu:not(:last-child) > a {
         border-right: 1px solid var(--kompassi-fg-10);
      }
      > a:first-child,
      > .kompassi-dropdown-menu:first-child > a {
         border-bottom-left-radius: var(--kompassi-radius);
         border-top-left-radius: var(--kompassi-radius);
      }
      > a:last-child,
      > .kompassi-dropdown-menu:last-child > a {
         border-top-right-radius: var(--kompassi-radius);
         border-bottom-right-radius: var(--kompassi-radius);
      }
   }
}

/*
 *  Dropdown menu
 *
 */

.kompassi-dropdown-menu {
   display: inline-block;

   > :is(a),
   .kompassi-dropdown-menu-items {
      cursor: pointer;
		background: var(--kompassi-bg);
		border-radius: var(--kompassi-radius);
		box-shadow: var(--kompassi-box-shadow);
      text-decoration: none;
   }

   .kompassi-dropdown-menu-items {
      display: none;
      list-style-type: none;
      padding-left: 0;
      margin: 0;
      border-top-left-radius: 0;
      min-width: max-content;

      li {
         border-bottom: 1px solid var(--kompassi-fg-10);
      }

      :is(a) {
         display: block;
         padding: var(--kompassi-padding);
         color: var(--kompassi-fg);
         text-decoration: none;
      }
   }

   > :is(a) {
      display: block;
      position: relative;
      user-select: none;

      width: calc( var(--kompassi-icon-size) + var(--kompassi-padding) * 2 );
      height: calc( var(--kompassi-icon-size) + var(--kompassi-padding) * 2 );

      &::before {
         content: '';
         display: inline-block;
         position: relative;
         top: var(--kompassi-padding);
         left: var(--kompassi-padding);
         width: var(--kompassi-icon-size);
         height: var(--kompassi-icon-size);
         background-repeat: no-repeat;
         background-position: 50% 50%;
         background-size: contain;
         opacity: 0.5;
      }
   }

   &.open {
      position: relative;

      .kompassi-dropdown-menu-items {
         position: absolute;
         display: block;
         z-index: 30000;
      }

      > :is(a) {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;

         color: #fff;
         background-color: var(--kompassi-palette-2);
      }
   }
}

/*
 *  Modal
 *
 */

#kompassi_modal {
	position: fixed;
   display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	bottom: 0;
   z-index: 15000;

   color: var(--kompassi-fg);
	background-color: var(--kompassi-bg);
	box-shadow: var(--kompassi-box-shadow);

	overflow: hidden;
   user-select: text !important;

   @supports (height:100dvh) {
      height: 100dvh;
   }

   a {
      &:is(:link, :visited, :hover, :active) {
         color: var(--kompassi-fg);
      }
      &:is(:focus) {
         color: var(--kompassi-link);
      }
   }

   .header {
      position: relative;
      display: grid;
      grid-template-columns: auto max-content;
      grid-template-areas: 'title actions';
      grid-gap: var(--kompassi-padding-large);
      padding: var(--kompassi-padding-large);
      background-color: var(--kompassi-bg);

      .title {
         font-size: 120%;
         line-height: var(--kompassi-line-height);
         align-self: center;
      }
      .actions {
         --kompassi-icon-size: var(--kompassi-line-height);
      }

      [class*="kompassi-icon"]::before {
         margin: 0 0 0 0.5em;
         height: calc(var(--kompassi-icon-size) + var(--kompassi-padding));
         width: calc(var(--kompassi-icon-size) + var(--kompassi-padding));
         background-position: 50% 50%;
         background-size: contain;
         background-repeat: no-repeat;
         cursor: pointer;
      }

   }

   .content {
      .actions {
         background-color: var(--kompassi-palette-3);
         padding: var(--kompassi-padding) var(--kompassi-padding-large);
         margin-right: 0;
         margin-bottom: 0;
         height: auto;

         a::before {
            opacity: 1;
         }

         &:is(.has-icon-and-label) {
            a::after {
               content: attr(title);
            }
         }

         .favorite {
            color: #fff;
            background-color: var(--kompassi-palette-2);
         }
      }

      .main, .footer {
         padding: var(--kompassi-padding-large);
      }

      .main {
         flex: auto;
         display: flex;
         flex-direction: column;

         font-size: 107%;
         line-height: 1.7em;

         > * {
            margin-left: 0;
            padding-left: 0;
            line-height: 1.7em;
         }

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

         .description {
            flex-grow: 1;
         }
      }

      .footer {
         flex: 0 0 min-content;
         background-color: var(--kompassi-bg);
      }

      &:not(.dimension) {
         display: flex;
         flex-direction: column;
         flex: auto;
         overflow-y: auto;
         background:
            /* Shadow covers */
            linear-gradient(hsla(0deg, 0%, 0%, 5%) 30%, rgba(255, 255, 255, 0%)),
            linear-gradient(rgba(255, 255, 255, 0%), hsla(0deg, 0%, 0%, 5%) 70%) 0 100%,

            /* Shadows */
            radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 0%)),
            radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 0%)) 0 100%;

         background-repeat: no-repeat;
         background-color: var(--kompassi-palette-5);
         background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

         /* Opera doesn't support this in the shorthand */
         background-attachment: local, local, scroll, scroll;
      }
   }

   &.actions-bottom-right {
      .content .actions {
         text-align: right;
         order: 2;
      }
   }

   &.kompassi-document {
      ul {
         list-style-position: inside;

         li::marker {
            content: "– ";
         }
      }
   }

   /* TODO: Prefer container queries */
   @media screen and (width < 600px) {
      .actions {
         a {
            display: block;
            width: calc(100% - var(--kompassi-padding) * 2);
         }
      }

      .content {
         .actions {
            a {
               border-radius: 0;
               border-right: none;
               box-shadow: none;

               &:first-child {
                  border-top-right-radius: var(--kompassi-radius);
                  border-top-left-radius: var(--kompassi-radius);
               }

               &:last-child {
                  border-bottom-right-radius: var(--kompassi-radius);
                  border-bottom-left-radius: var(--kompassi-radius);
               }

               &:not(:last-child) {
                  border-bottom: 1px solid var(--kompassi-fg-10);
               }
            }

            .favorite {
               /* TODO? */
               margin-right: 0;
            }
         }
      }
   }

   @media screen and (width >= 900px) and (height >= 800px) {
      width: auto;
      height: calc( 100vh - 7em );
      max-width: var(--kompassi-modal-max-width);
      right: max( 4em, calc( ( 100vw - var(--kompassi-modal-max-width) ) / 2 ) );
      left: max( 4em, calc( ( 100vw - var(--kompassi-modal-max-width) ) / 2 ) );
      top: 3.5em;
      bottom: 3.5em;
      border-radius: var(--kompassi-radius);

      &.small-modal {
         right: max( 4em, 15vw );
         left: max( 4em, 15vw );
         top: max( 4em, 15vh );
         bottom: max( 4em, 15vh );
         height: auto;
      }
      .header .title {
         font-size: 150%;
      }
   }

   @media screen and (width >= 1100px) and (height >= 1000px) {
      &.small-modal {
         right: max( 4em, 25vw );
         left: max( 4em, 25vw );
         top: max( 4em, 25vh );
         bottom: max( 4em, 25vh );
      }
   }
}

#kompassi_modal_underlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
   background-color: var(--kompassi-palette-0);
   opacity: 0.85;
   z-index: 14999;
}

/*
 *  Popover
 *
 */

#kompassi_popover {
   container-type: normal;
   position: absolute;
   z-index: 14998;

	padding: 0.5em;

   color: #fff;
   background-color: var(--kompassi-palette-1);
	box-shadow: var(--kompassi-box-shadow);
	border-radius: var(--kompassi-radius);

   p {
      margin: 0;
   }
}

/*
 *  Dropdown lists
 *
 */

.kompassi-dropdown {
   position: relative;

   > :is(*) {
      width: 100%;
   }

   button {
      position: relative;
      appearance: none;
      cursor: pointer;

      padding: var(--kompassi-padding);
      color: #fff;
      background-color: hsl(0deg, 0%, 0%);
      border: none;
      border-radius: var(--kompassi-radius);
      font-family: var(--kompassi-font);
      font-size: 100%;
      text-align: left;

      .title {
         display: block;
         width: calc(100% - var(--kompassi-padding));
         text-wrap: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
      }

      &::after {
         content: '';
         display: block;
         position: absolute;
         top: 0;
         bottom: 0;
         right: 0.5em;
         width: 1em;
         height: 100%;
         margin: 0 auto;

         border: none;
         background-image: url("../images/icons/dropdown.svg");
         background-size: contain;
         background-repeat: no-repeat;
         background-position: 50% 50%;
         filter: invert();
      }
   }

   .kompassi-indicator {
      position: absolute;
      right: var(--kompassi-padding);
      top: var(--kompassi-padding);
      z-index: 2;
   }

   ul {
      display: none;
      list-style-type: none;
      margin-top: 0;
      padding-left: 0;
      border: 1px solid var(--kompassi-fg-50);
      max-height: 400px;
      overflow-y: scroll;

      li {
         color: var(--kompassi-fg);
         background-color: var(--kompassi-bg);
         border-top: 1px solid var(--kompassi-fg-10);

         &.description, label {
            padding: calc(var(--kompassi-padding) / 2);
         }

         label {
            cursor: pointer;
            display: grid;
            grid-template-columns: 2em auto;

            input {
               vertical-align: top;
               height: 1em;
               outline: none;
            }
         }
      }
   }

   &.open {
      ul {
         display: block;
         position: absolute;
         left: 0;
         z-index: 4000;
         background-color: #eee;
      }
   }
}

/*
 *  Tables
 *
 */

.kompassi-table {
   width: 100%;
   border-collapse: collapse;
   box-shadow: var(--kompassi-box-shadow);

   th, td {
      padding: var(--kompassi-padding) !important;
      border: 1px solid var(--kompassi-fg-25);
   }
   th {
      text-align: left;
   }
}