window#quicksettings .quicksettings {
  font-family: "Iosevka";
  margin: 0px 0px 43px 20px;
  // border-left: 2px solid $blue;
  // border-top: 2px solid $blue;
  // border-bottom: 2px solid $blue;
  background-color: $base;
  color: $text;
  border-radius: 25px 0px 0px 25px;
  padding: 10px;
  // min-height: 1009px;
  box-shadow:
    rgba(0, 0, 0, 0.4) -8px 4px 10px;

  &.horizontal>* {
    margin: 0 5px;

    &:first-child {
      margin-left: 0;
    }

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

  &.vertical>* {
    margin: 5px 0;

    &:first-child {
      margin-top: 0;
    }

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

  .avatar {
    border-radius: 5px;
    transition: 200ms;
    color: $text;
    background-color: $mantle;
    border: 2px solid $rosewater;
  }

  .header {
    &.horizontal>* {
      margin: 0 2.5px;

      &:first-child {
        margin-left: 0;
      }

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

    &.vertical>* {
      margin: 2.5px 0;

      &:first-child {
        margin-top: 0;
      }

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

    color: transparentize($text, .15);

    // button {
    //   all: unset;
    //   transition: 200ms;
    //   border-radius: 10px;
    //   color: $text;
    //
    //   >* {
    //     border-radius: 50px;
    //     transition: 200ms;
    //     background-color: $crust;
    //     box-shadow: inset 0 0 0 5px $green;
    //   }
    //
    //   &:focus>*,
    //   &.focused>* {
    //     box-shadow: inset 0 0 0 3px #0e0e0e;
    //     background-color: $blue;
    //     color: $mantle;
    //   }
    //
    //   &:hover>* {
    //     box-shadow: inset 0 0 0 3px $blue;
    //     background-color: $blue;
    //     color: $mantle;
    //   }
    //
    //   &:active,
    //   &.active,
    //   &.on,
    //   &:checked {
    //     >* {
    //       box-shadow: inset 0 0 0 2px $blue;
    //       background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
    //       background-color: $blue;
    //       color: $base;
    //     }
    //
    //     &:hover>* {
    //       box-shadow: inset 0 0 0 2px $blue,
    //         inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
    //     }
    //   }
    //
    //   &:disabled {
    //     box-shadow: none;
    //     background-color: transparent;
    //     color: transparentize($blue, 0.7);
    //   }
    //
    //   padding: 20px;
    //
    //   image {
    //     font-size: 1.4em;
    //   }
    // }
  }

  .sliders-box {
    border-radius: 15px;
    transition: 200ms;
    color: $text;
    background-color: $surface0;
    // border: 2px solid $rosewater;
    padding: 5px;

    button {
      all: unset;
      // border: 2px solid $text;
      transition: 200ms;
      border-radius: 5px;
      margin: 5px;
      color: $text;
      font-size: 24px;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      padding: 3px;

      &:focus,
      &.focused {
        // box-shadow: inset 0 0 0 3px #0e0e0e;
        background-color: darken($surface0, 10%);
        color: $text;
      }

      &:hover {
        // box-shadow: inset 0 0 0 3px $text;
        background-color: darken($surface0, 10%);
        color: $text;
      }


      &:active,
      &.active,
      &.on,
      &:checked {
        box-shadow: inset 0 0 0 2px $blue;
        background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
        background-color: $blue;
        color: $base;

        &:hover {
          box-shadow: inset 0 0 0 2px $blue,
            inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
        }
      }

      &:disabled {
        box-shadow: none;
        background-color: transparent;
        color: transparentize($blue, 0.7);
      }
    }

    .volume button.arrow:last-child {
      margin-left: 10px;
    }

    .volume,
    .brightness {
      padding: 5px;
    }

    scale {
      all: unset;

      * {
        all: unset
      }

      trough {
        transition: 200ms;
        border-radius: 10px;
        // border: 2px solid $green;
        background-color: $base;
        min-height: 5px;
        min-width: 5px;

        highlight,
        progress {
          border-radius: 20px;
          background-image: linear-gradient(to right, darken($blue, 20%), darken($blue, 30%));
          min-height: 5px;
          min-width: 5px;
        }
      }

      slider {
        box-shadow: none;
        background-color: transparent;
        border: 1px solid transparent;
        transition: 200ms;
        border-radius: 10px;
        min-height: 16px;
        min-width: 16px;
        margin: -4px;
      }

      &:hover {
        trough {
          background-color: $mantle;
        }

        slider {
          background-color: $text;
          border-color: $blue;
          // box-shadow: 0 0 3px 0 #0e0e0e;
        }
      }

      &:disabled {

        highlight,
        progress {
          background-color: transparentize($text, 0.4);
          background-image: none;
        }
      }

      trough:focus {
        background-color: $crust;
        // box-shadow: inset 0 0 0 4px $mantle;

        slider {
          background-color: darken($text, 10%);
          // box-shadow: inset 0 0 0 4px $mantle;
        }
      }

      margin: 0 10px;
    }
  }

  .row {
    &.horizontal>* {
      margin: 0 10px;

      &:first-child {
        margin-left: 0;
      }

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

    &.vertical>* {
      margin: 10px 0;

      &:first-child {
        margin-top: 0;
      }

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

  .menu {
    all: unset;
    transition: 200ms;
    border-radius: 10px;
    color: $text;
    background-color: $surface1;
    // border: 2px solid $rosewater;
    padding: 5px;
    margin-top: 10px;

    .icon {
      margin: 0 10px;
      margin-left: 4px;
    }

    .title {
      font-weight: bold;
    }

    separator {
      margin: 10px;
      background-color: $rosewater;
    }

    button {
      all: unset;
      transition: 200ms;
      border-radius: 5px;
      color: $text;
      background-color: transparent;
      background-image: none;
      box-shadow: none;


      &:focus,
      &.focused {
        // box-shadow: inset 0 0 0 3px #0e0e0e;
        background-color: $mantle;
        color: $blue;
      }

      &:hover {
        // box-shadow: inset 0 0 0 3px $blue;
        background-color: $mantle;
        color: $blue;
      }

      &:active,
      &.active,
      &.on,
      &:checked {
        box-shadow: inset 0 0 0 2px $blue;
        background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
        background-color: $mantle;
        color: $blue;

        &:hover {
          box-shadow: inset 0 0 0 2px $blue,
            inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
        }
      }

      &:disabled {
        box-shadow: none;
        background-color: transparent;
        color: transparentize($blue, 0.7);
      }

      padding: 10px;

      image:first-child {
        margin-right: 10px;
      }
    }

    .bluetooth-devices {
      &.horizontal>* {
        margin: 0 5px;

        &:first-child {
          margin-left: 0;
        }

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

      &.vertical>* {
        margin: 5px 0;

        &:first-child {
          margin-top: 0;
        }

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

    switch {

      all: unset;
      transition: 200ms;
      border-radius: 100px;
      color: $text;

      background-color: $rosewater;
      box-shadow: inset 0 0 0 4px $green;


      &:focus>*,
      &.focused>* {
        box-shadow: inset 0 0 0 3px #0e0e0e;
        background-color: $blue;
        color: $mantle;
      }

      &:hover>* {
        box-shadow: inset 0 0 0 3px $blue;
        background-color: $blue;
        color: $mantle;
      }

      &:active,
      &.active,
      &.on,
      &:checked {
        >* {
          box-shadow: inset 0 0 0 2px $blue;
          background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
          background-color: $blue;
          color: $base;
        }

        &:hover>* {
          box-shadow: inset 0 0 0 2px $blue,
            inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
        }
      }

      &:disabled {
        box-shadow: none;
        background-color: transparent;
        color: transparentize($blue, 0.7);
      }

      slider {
        background-color: $blue;
        border-radius: 10px;
        min-width: 24px;
        min-height: 24px;
      }

      image {
        color: transparent;
      }
    }
  }

  .sliders-box .menu {
    margin: 10px 0;

    &.app-mixer {
      .mixer-item {
        padding: 10px;
        padding-left: 0;
        padding-right: 20px;

        scale {
          all: unset;

          * {
            all: unset
          }

          trough {
            transition: 200ms;
            border-radius: 10px;
            // border: 2px solid $green;
            background-color: $base;
            min-height: 5px;
            min-width: 5px;

            highlight,
            progress {
              border-radius: 20px;
              background-image: linear-gradient(to right, darken($blue, 20%), darken($blue, 30%));
              min-height: 5px;
              min-width: 5px;
            }
          }

          slider {
            box-shadow: none;
            background-color: transparent;
            border: 1px solid transparent;
            transition: 200ms;
            border-radius: 10px;
            min-height: 16px;
            min-width: 16px;
            margin: -4px;
          }

          &:hover {
            trough {
              background-color: $mantle;
            }

            slider {
              background-color: $text;
              border-color: $blue;
              // box-shadow: 0 0 3px 0 #0e0e0e;
            }
          }

          &:disabled {

            highlight,
            progress {
              background-color: transparentize($text, 0.4);
              background-image: none;
            }
          }

          trough:focus {
            background-color: $crust;
            // box-shadow: inset 0 0 0 4px $mantle;

            slider {
              background-color: darken($text, 10%);
              // box-shadow: inset 0 0 0 4px $mantle;
            }
          }

          margin: 0 10px;

        }

        image {
          font-size: 1.6em;
          margin: 0 8px;
        }
      }
    }
  }

  .toggle-button {
    all: unset;
    transition: 200ms;
    border-radius: 10px;
    color: $text;
    background-color: $surface0;
    // box-shadow: inset 0 0 0 1px $rosewater;


    &:focus,
    &.focused {
      box-shadow: inset 0 0 0 3px #0e0e0e;
      background-color: $blue;
      color: $mantle;
    }

    &:hover {
      box-shadow: inset 0 0 0 2px $green;
      background-color: $surface2;
      color: $text;
    }

    &:active,
    &.active,
    &.on,
    &:checked {
      box-shadow: inset 0 0 0 2px $blue;
      background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
      background-color: $surface2;
      color: $base;

      &:hover>* {
        box-shadow: inset 0 0 0 2px $blue,
          inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
      }
    }

    &:disabled {
      box-shadow: none;
      background-color: transparent;
      color: transparentize($blue, 0.7);
    }

    font-weight: bold;

    image {
      font-size: 1.3em;
    }

    label {
      margin-left: 10px;
    }

    button {
      all: unset;
      transition: 200ms;
      border-radius: 10px;
      color: $text;
      background-color: transparent;
      background-image: none;
      box-shadow: none;

      &:focus,
      &.focused {
        box-shadow: inset 0 0 0 2px $blue;
        background-color: $surface1;
        color: $text;
      }

      &:hover {
        box-shadow: inset 0 0 0 1px $rosewater;
        background-color: $surface2;
        color: $text;
      }

      &:active,
      &.active,
      &.on,
      &:checked {
        box-shadow: inset 0 0 0 1px $blue;
        background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
        background-color: $surface0;
        color: $text;

        &:hover>* {
          box-shadow: inset 0 0 0 2px $blue,
            inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
        }

        &:disabled {
          box-shadow: none;
          background-color: transparent;
          color: transparentize($blue, 0.7);
        }
      }

      &:first-child {
        padding: 12px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:last-child {
        padding: 6px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &.active {
      background-color: $surface1;

      label,
      image {
        color: $text;
      }
    }
  }

  .simple-toggle {
    all: unset;
    transition: 200ms;
    border-radius: 10px;
    color: $text;
    background-color: $surface0;
    background-image: none;
    box-shadow: none;

    &:focus,
    &.focused {
      box-shadow: inset 0 0 0 2px $rosewater;
      background-color: $surface1;
      color: $text;
    }

    &:hover {
      box-shadow: inset 0 0 0 1px $blue;
      background-color: $surface1;
      color: $text;
    }

    &:active,
    &.active,
    &.on,
    &:checked {
      box-shadow: inset 0 0 0 2px $blue;
      background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
      background-color: $blue;
      color: $text;

      &:hover {
        box-shadow: inset 0 0 0 2px $blue,
          inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
      }
    }

    &:disabled {
      box-shadow: none;
      background-color: transparent;
      color: transparentize($blue, 0.7);
    }

    font-weight: bold;
    padding: 10px;

    label {
      margin-left: 4px;
    }

    image {
      font-size: 1.3em;
    }
  }

  .media {

    &.horizontal>* {
      margin: 0 10px;

      &:first-child {
        margin-left: 0;
      }

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

    &.vertical>* {
      margin: 10px 0;

      &:first-child {
        margin-top: 0;
      }

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

    .player {

      transition: 200ms;
      border-radius: 15px;
      color: $text;
      background-color: $crust;
      // border: 1px solid $rosewater;
      padding: 5px;

      .cover {
        box-shadow: 2px 2px 2px 0 #0e0e0e;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        margin: 10px 15px 10px 10px;
      }

      button {
        all: unset;
        transition: 200ms;
        border-radius: 10px;
        color: $text;
        padding: 5px;
        background-color: transparent;
        background-image: none;
        box-shadow: none;

        &:focus,
        &.focused {
          box-shadow: inset 0 0 0 1px $rosewater;
          // background-color: $blue;
          // color: $mantle;
        }

        &:hover {
          box-shadow: inset 0 0 0 1px $blue;
          background-color: $surface0;
          color: $blue;
        }

        &:active,
        &.active,
        &.on,
        &:checked {
          box-shadow: inset 0 0 0 2px $blue;
          background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
          background-color: $blue;
          color: $base;

          &:hover {
            box-shadow: inset 0 0 0 2px $blue,
              inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
          }
        }

        &:disabled {
          box-shadow: none;
          background-color: transparent;
          color: transparentize($blue, 0.7);
        }


        &.play-pause {
          margin: 0 5px;
        }

        image {
          font-size: 1.5em;
        }
      }

      .artist {
        color: transparentize($text, .2);
        font-size: .9em;
      }

      scale {

        // @include slider($width: .5em, $slider: false, $gradient: linear-gradient($fg, $fg));
        trough {
          transition: 200ms;
          border-radius: 10px;
          // border: 1px solid $rosewater;
          background-color: $base;
          min-height: 0.5em;
          min-width: 0.5em;

          highlight,
          progress {
            border-radius: 10px;
            background-image: linear-gradient($overlay1, $overlay1);
            min-height: 0.5em;
            min-width: 0.5em;
          }
        }

        slider {
          box-shadow: none;
          background-color: transparent;
          border: 4px solid transparent;
          transition: 200ms;
          border-radius: 10px;
          min-height: 0.5em;
          min-width: 0.5em;
          margin: -0.5em;
        }

        &:hover {
          trough {
            background-color: $surface0;
          }
        }

        &:disabled {

          highlight,
          progress {
            background-color: transparentize($text, 0.4);
            background-image: none;
          }
        }

        trough:focus {
          background-color: $blue;
          box-shadow: inset 0 0 0 4px $mantle;
        }

        margin-bottom: 5px;

        trough {
          border: none;
        }
      }

      .icon {
        font-size: 22px;
        margin: 5px 5px 0px 0px;
      }
    }
  }

  // notification
  .notifications {
    .header {
      margin-bottom: 20px;
      margin-right: 30px;

      >label {
        margin-left: 15px;
      }

      button {
        all: unset;
        transition: 200ms;
        border-radius: 10px;
        color: $text;

        background-color: $surface0;
        // box-shadow: inset 0 0 0 2px $blue;

        &:focus {
          box-shadow: inset 0 0 0 2px #0e0e0e;
          background-color: transparentize(#eeeeee, $amount: 0.8);
          color: lighten($color: #eeeeee, $amount: 8%);
        }

        &:hover {
          box-shadow: inset 0 0 0 2px $blue;
          background-color: transparentize(#eeeeee, $amount: 0.8);
          color: lighten($color: #eeeeee, $amount: 8%);
        }

        &:active,
        &.on,
        &.active,
        &:checked {
          box-shadow: inset 0 0 0 2px $blue;
          background-image: linear-gradient(to right, $mantle, darken($mantle, 4%));
          background-color: $blue;
          color: $base;

          &:hover {
            box-shadow: inset 0 0 0 2px $blue,
              inset 0 0 0 99px transparentize(#eeeeee, $amount: 0.8);
          }
        }

        &:disabled {
          box-shadow: none;
          background-color: transparent;
          color: transparentize($mantle, 0.7);
        }

        padding: 10px;
      }
    }

    .notification-scrollable {

      scrollbar,
      scrollbar * {
        all: unset;
      }

      scrollbar.vertical {
        transition: 200ms;
        background-color: transparentize($base, 0.7);

        &:hover {
          background-color: transparentize($base, 0.3);

          slider {
            background-color: transparentize($text, 0.3);
            min-width: .6em;
          }
        }
      }


      scrollbar.vertical slider {
        background-color: transparentize($text, 0.5);
        border-radius: 10px;
        min-width: .4em;
        min-height: 2em;
        transition: 200ms;
      }
    }

    .notification-list {
      margin-right: 10px;
    }

    .notification {
      &.critical {
        box-shadow: inset 0 0 .5em 0 $red;
      }

      &:hover button.close-button {
        // @include button-hover;
        background-color: transparentize($red, .5);
      }

      .content {
        .title {
          margin-top: 5px;
          margin-right: 10px;
          color: $text;
          font-size: 1.2em;
        }

        .time {
          color: transparentize($text, .2);
          margin: 5px 10px;
        }

        .description {
          font-size: .9em;
          color: transparentize($text, .2);
        }

        .icon {
          border-radius: 10px;
          margin-right: 10px;

          &.img {
            border: 2px solid $green;
          }
        }
      }

      box.actions {
        // @include spacing(0.5);
        margin-top: 10px;

        button {
          // @include button;
          background-color: $surface0;
          border: 2px solid $surface0;
          border-radius: 10px;
          font-size: 1.2em;
          margin: 0px 10px 10px 0px;
          padding: 10px;

          &:first-child {
            margin: 0px 10px 10px 10px;
          }

          &:hover {
            background-color: $surface2;
            border: 2px solid $rosewater;
          }
        }
      }

      button.close-button {
        // @include button($flat: true);
        margin: 0px 0px 0px 0px;
        border-radius: 10px;
        min-width: 30px;
        min-height: 30px;
        background-color: rgba(0, 0, 0, 0); //$crust;
        padding: 0px;

        &:hover {
          background-color: transparentize($red, .2);
        }

        &:active {
          background-image: none;
          background-color: $red;
        }
      }

      transition: 200ms;
      color: $text;
      margin-bottom: 10px;
      border-radius: 15px;
      background-color: $base;
      font-family: "Iosevka";
      padding: 5px;
      border: 1px solid $rosewater;
      box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 5px;
    }

    .placeholder {
      image {
        font-size: 7em;
      }

      label {
        font-size: 1.2em;
      }
    }
  }
}