@import "theme";

* {
  all: unset;

  color: $text;
  font-size: 16px;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@mixin rounded-full {
  border-radius: 9999px;
}

// Add horizontal space between all direct child elements.
@mixin space-between-x($space) {
  >*+* {
    margin-left: $space;
  }
}

// Add vertical space between all direct child elements.
@mixin space-between-y($space) {
  >*+* {
    margin-top: $space;
  }
}

@function is-dark($color) {
  @return lightness($color) < 50;
}

@function hover-color($color) {
  @if is-dark($color) {
    @return scale-color($color, $lightness: 5%);
  }

  @return scale-color($color, $lightness: -5%);
}

.bar {
  background-color: $background0;
  font-weight: bold;

  .bar-widget {
    @include rounded-full;
    background-color: transparent;

    margin-left: 0.3em;
    margin-right: 0.3em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;

    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0em;
    padding-bottom: 0em;

    &.active {
      box-shadow: inset 0 0 0 100px scale-color($surface0, $lightness: -10%);
    }

    &:hover {
      box-shadow: inset 0 0 0 100px $surface0;
    }

    .workspaces {
      padding-top: 0.870em;
      padding-bottom: 0.870em;
      padding-left: 0.25em;
      padding-right: 0.25em;

      @include space-between-x(0.5em);

      .workspace-indicator {
        @include rounded-full;

        transition-property: min-width, background-color;
        transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
        transition-duration: 200ms;

        min-height: 0.45em;
        min-width: 0.45em;

        margin-bottom: -0.20em;
        margin-top: -0.20em;

        background-color: mix($background0, $text, 50%);

        &.active {
          min-height: 0.6em;
          min-width: 1.8em;

          margin-bottom: -0.30em;
          margin-top: -0.30em;

          background-color: $text;
        }
      }

    }

    .time {
      font-weight: bold;
      margin-top: 0.25em;
      margin-bottom: 0.25em;
    }

    .status-indicators {
      .status-indicator {
        margin-left: 0.4em;
        margin-right: 0.4em;
      }
    }
  }
}

// Common styles for a popup window.
.popup {
  background-color: $background1;
  border-radius: 1.75em;
  margin: 0.25em;
  box-shadow: 0 0.1em 0.25em rgba(20, 20, 20, 0.25);
  border: 1px solid scale-color($background1, $lightness: 7.5%);
}

window.darkened {
  background-color: rgba(0, 0, 0, 0.50);
  box-shadow: inset 0em 0em 5em 1em rgba(0, 0, 0, 0.75);
}

.modal {
  min-width: 24em;
  border-radius: 1.25em;

  .content {
    padding: 2em;
    padding-left: 3em;
    padding-right: 3em;

    @include space-between-y(1em);

    .title {
      font-size: 1.5em;
      font-weight: bold;
    }

    .description {
      font-size: 1.10em
    }
  }

  .buttons {
    * {
      font-weight: bold;
      font-size: 1.05em;
    }

    .no-button,
    .yes-button {
      padding: 0.5em;

      background-color: $surface0;

      &:hover {
        background-color: hover-color($surface0);
      }

      &.emphasize {
        background-color: scale-color($surface0, $lightness: 10%);
        border: 2px solid scale-color($surface0, $lightness: 20%);

        &:hover {
          background-color: scale-color($surface0, $lightness: 15%);
          border: 2px solid scale-color($surface0, $lightness: 25%);
        }
      }
    }

    .no-button {
      border-bottom-left-radius: 1.25em;
    }

    .yes-button {
      border-bottom-right-radius: 1.25em;
    }
  }
}

.quicksettings {
  @include space-between-y(1.5em);

  padding: 1em;
  min-width: 24em;

  // Ensures the shadow doesnt get cut off.
  margin-left: 0.5em;
  margin-bottom: 0.5em;

  .button-row {
    @include space-between-x(3em);

    >* {
      @include space-between-x(0.75em);
    }
  }

  .button {
    @include rounded-full;

    background-color: $surface0;
    padding: 0.625em;

    &:hover {
      background-color: hover-color($surface0);
    }

    &:active {
      background-color: $primary;

      * {
        color: $background1;
      }
    }
  }

  .power-menu {
    @include space-between-y(0.625em);

    margin-top: 1.25em;
    padding: 0.625em;
    border-radius: 25px;
    background-color: hover-color($background1);

    .title {
      .icon {
        @include rounded-full;
        padding: 0.625em;
        background-color: hover-color($surface0);
        margin-right: 0.625em;
      }

      label {
        font-size: 1.25em;
        font-weight: bold;
      }
    }

    .entries {
      .entry {
        @include rounded-full;
        padding: 0.625em;

        &:hover {
          background-color: hover-color($surface0);
        }

        &:active {
          background-color: $primary;

          * {
            color: $background1;
          }
        }
      }
    }
  }

  .sliders {
    @include space-between-y(1.5em);
  }

  .slider {
    @include space-between-x(1.5em);
    padding-left: 0.25em;
    padding-right: 0.25em;

    scale {
      * {
        @include rounded-full;
      }

      $width: 0.25em;

      trough {
        min-height: $width;
        min-width: $width;
        background-color: $surface0;

        highlight,
        progress {
          background-color: $primary;
          min-height: $width;
          min-width: $width;
        }
      }

      slider {
        background-color: $text;
        min-height: $width;
        min-width: $width;
        margin: -0.5em;
      }
    }
  }

  .toggle-buttons {
    label {
      font-weight: bold;
      font-size: 14px;
    }

    .toggle-button {
      border-top-left-radius: 9999px;
      border-bottom-left-radius: 9999px;

      // If there is a chevron after the pill button it will be the right part of the pill shape.
      &:last-child {
        border-top-right-radius: 9999px;
        border-bottom-right-radius: 9999px;
      }

      background-color: $surface0;
      min-height: 3em;

      &:hover {
        background-color: hover-color($surface0);
      }

      &:checked {
        background-color: $primary;

        &:hover {
          background-color: hover-color($primary);
        }

        * {
          color: $background1;
        }
      }

      >box>box {
        @include space-between-x(0.5em);
        padding-left: 1em;
        padding-right: 1em;

        >box {
          @include space-between-y(0.1em);
        }
      }

      label {
        font-size: 0.865em;

        &.subtext {
          font-weight: normal;
          font-size: 0.775em;
        }
      }
    }

    // Placed after a toggle button to allow for opening a submenu.
    .chevron {
      padding-right: 0.75em;
      padding-left: 0.5em;
      background-color: mix(white, $surface0, 5%);
      border-top-right-radius: 9999px;
      border-bottom-right-radius: 9999px;

      border-left-color: $background1;
      border-left-width: 1px;
      border-left-style: solid;
    }

    // Make sure the chevron has the primary colour when the toggle before it is checked.
    *:checked+.chevron {
      background-color: mix(white, $primary, 15%);

      &:hover {
        background-color: hover-color(mix(white, $primary, 15%));
      }

      * {
        color: $background1;
      }
    }
  }

}

.osd-popup {
  >box {
    background-color: $background0;
    border: 1px solid scale-color($background0, $lightness: 7.5%);
    border-radius: 9999px;
    box-shadow: 0 0.1em 0.25em rgba(20, 20, 20, 0.25);
    padding: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin: 0.5em;
    margin-bottom: 5em;

    @include space-between-x(1em);

    box.middle {
      label {
        font-size: 16px;
        margin-bottom: 0.4em;
        margin-top: -0.4em
      }

      // Styled the level bar.
      block {
        &.filled {
          border-radius: 9999px;
          background-color: $text;
        }

        &.empty {
          border-radius: 9999px;
          background-color: $surface0;
        }
      }

    }
  }
}
