* {
  all: unset; //Unsets everything so you can style everything from scratch
}

//Global Styles
.bar-widget {
	@include window;
	background-color: $bg;
	color: $fg;
	padding: 1rem;
}


.apps {
  background-color: $bg-alt;
  padding: .5rem;
  margin: 0 -.5rem;
  border-radius: .4rem;
}

.uptime {
  font-size: .9rem;
  color: $fg-alt;
  padding: .2rem;
}

.launcher {
  color: $green;
  font-size: 1.4rem;
  padding: 0 .30rem 0 0; 
}

.spotify {
  color: $green;
  font-size: 1.5rem;
}

.central-icon {
  font-size: 1.5rem;
}

.bell {
  font-size: 1.5rem;
  color: $yellow;
}

.firefox {
  color: $cyan;
  font-size: 1.5rem;
  padding: 0 .2rem 0 0; 
}

.workspaces {
    font-size: 1.2rem;
    border-radius: 1rem;
	margin: 0 0 0 -.3rem;


    .icon {
      &.current {color: $green;}
    }

    button {
      &.empty {
        color: $black;
      }

      &.occupied {
        color: lighten($color: $fg-alt2, $amount: 10%);
      }

      &.current {
        color: $green;
      }

      &:hover {
        &.empty {
          color: lighten($color: $black, $amount: 5%);
        }
        &.occupied {
          color: lighten($color: $black, $amount: 20%);
        }
        &.current {
          color: darken($color: $green, $amount: 10%);
        }
      }
    }
  }

  .volume {
    font-size: 1.3rem;
      .volume-bar scale trough {
        all: unset;
        background-color: $black;
        border-radius: 1rem;
        min-width: 0.4rem;
        min-height: 3rem;
        margin-bottom: 0.5rem;
        box-shadow: 0 0 2px 1px rgba(black, 0.3);
      }

      .volume-bar scale trough highlight {
        all: unset;
        background: $green;
        border-radius: 1rem;
      }
    }

 .clock {
    font-family: "SF Pro";
    font-size: 1.4rem;

    &.hour {
      font-weight: bold;
      color: $fg;
    }

    &.minute {
      color: $fg-alt;
    }

    &.separator {
      color: $fg-alt;
    }
    .timebox {
      font-size: 0.5rem;

      &.magenta {
        color: $magenta;
      }

      &.green {
        color: $green;
      }

      &.yellow {
        color: $yellow;
      }
    }
  }
