@use "sass:color";
@use "core/variables" as vars;


.window {
  border: 1px solid color.adjust(vars.$fg, $alpha: -0.8);
}

.calendar {
  border-color: transparent;
  background-color: transparent;
}


.systemInfo {
  .powerOptions {
    button {
      min-width: 3rem;
      min-height: 4rem;
      font-size: 2rem;
      margin: 0 8px;
    }
  }
}

.weather.mini .icon {
  font-size: 1.2rem;
}

.weather.big .icon {
  font-size: 4rem;
}

.weather.forecast .icon {
  font-size: 2rem;
}

.barItem {
  margin: 0 vars.$spacing;

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

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

.weather.mini .icon {
  margin-left: 7rem;
}



.panelButton {

  // border: 1px solid transparent;
  &:not(:hover):not(.focused) {

    background-color: transparent;


    //
    //
    // &.storage {
    //   border: 1px solid vars.$yellow;
    //  }
    // &.razer {
    //   border: 1px solid vars.$green;
    //
    // }
    // &.gtop {
    //   border: 1px solid vars.$blue;
    //
    // }
    // &.audio {
    //   border: 1px solid vars.$blue;
    //
    // }
    // &.connection {
    //   border: 1px solid vars.$mauve;
    //
    //
    // }

  }


  transition: background-color 0.3s ease-out;

  &.focused {
    background-color: color.adjust(vars.$primary, $alpha: -0.8);
  }

  &.pinned .icon {
    color: vars.$red;
  }

  &.pinned,
  &.floating {
    label.icon {
      opacity: 0.3;
    }
  }

  &.minimized {
    opacity: 0.5;
  }

  &.dateTime {
    .icon {
      color: vars.$peach;
    }
  }

  &.camera {
    .icon {
      color: vars.$red;
    }
  }

  &.connection {
    .icon {
      color: vars.$mauve;
    }
  }

  &.storage {

    .icon,
    .value {
      color: vars.$yellow;
    }
  }

  &.gtop {
    .icon {
      color: vars.$blue;
    }
  }

  &.easyeffects {
    .icon {
      color: vars.$green
    }
  }

  &.razer {

    .icon,
    .value {
      color: vars.$green;
    }

    .low {

      .icon,
      .value {
        color: vars.$peach;
      }
    }

    .critical {

      .icon,
      .value {
        color: vars.$red;
      }
    }
  }


  &.audio {

    .icon,
    .value {
      color: vars.$sapphire;
    }

    &.microphone {

      .icon,
      .volume {
        color: vars.$sky;
      }

      &.used {
        .icon {
          color: vars.$red
        }
      }
    }
  }

  &.workspace {
    font-size: 1.2rem;
    padding: 0 3px;
    min-width: 20px;

    &.active {
      label {
        color: vars.$red;
      }

      // background-color: color.adjust(vars.$mauve, $alpha: -0.8);

    }

    &.empty:not(.active) label {
      color: color.adjust(vars.$fg, $alpha: -0.8);
    }
  }
}



.calendar {
  &.button {
    color: vars.$fg;
  }

  .highlight {
    color: vars.$accent;
  }

  .indeterminate {
    color: vars.$fg;
  }

  .header {
    color: vars.$fg;
  }
}

.notification {
  .icon {
    color: vars.$primary;
  }

  .appname,
  .time {
    color: color.adjust(vars.$fg, $alpha: -0.6);
  }

  .message {
    color: color.adjust(vars.$fg, $alpha: -0.6);
  }
}

.notificationHistory {
  .notification {
    border-color: color.adjust(vars.$fg, $alpha: -0.9);
    // background-color: color.adjust(vars.$bg, $alpha: -0.5);
  }
}

.tag {
  background-color: color.adjust(vars.$fg, $alpha: -0.8);
  color: vars.$fg;
  margin: 0.1rem;
  padding: 0.2rem 0.8rem;
  border-radius: 0.3rem;
}

.mediaPlayerPopup {
  .info {
    margin-bottom: 0.8rem;

    .album {
      color: color.adjust(vars.$fg, $alpha: -0.6);
    }
  }

  .cover {
    margin-right: 0.8rem;
    border-radius: 0.5rem;
    min-width: 5rem;
    min-height: 5rem;
  }

  .seek {
    .slider {
      margin: 0 0.8rem;
    }
  }

  .controls {
    button:not(:hover) {
      background-color: transparent;
    }
  }
}


.launcher {

  .searchField {
    all: unset;
    padding: 1rem 0.7rem;
    border: none;
    outline: none;
  }

  .entry {
    .subtitle {
      opacity: 0.3;
    }
  }

  button {
    background: transparent;

    &.active,
    &:hover {
      background-color: color.adjust(vars.$fg, $alpha: -0.8);
    }
  }
}
