.central-widget {
 	@include window;
	background-color: $bg;
	color: $fg;
	padding: 1rem;
}

.profile {
  background-color: $bg-alt;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 4rem;
  min-width: 4rem;
  border-radius: .4rem;
}

.name {
  color: $fg;
  font-weight: bolder;
}

.wm {
  color: $fg-alt;
  font-weight: bold;
}

.lock, .exit {
  font-size: 1.2rem;
  background-color: $bg-alt;
  padding: .7rem 1.2rem .7rem 1rem;
  border-radius: .4rem;
}

.system-info {
  background-color: $bg-alt;
}


.music {
  background-color: $bg-alt;

	border-radius: .4rem;
  padding: .8rem;
}

.player {
	font-family: "JetBrainsMono Nerd Font";
	min-height: 1rem;
  border-radius: .1rem;
  margin: .1rem .8rem;
}

.player-art {
  background-color: $bg-alt;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 4rem;
  min-width: 4rem;
  border-radius: .4rem;
}

.player-info {
	border-radius: .4rem;

}

.player-title {
	font-size: 1rem;
  padding: .1rem 0;
	font-weight: bolder;  
}

.player-artist {
	color: $white;
  padding: .2rem 0;
}

.player-bar scale trough highlight {
	background-image: linear-gradient(to right, $bg-alt, $green);
	border-radius: .4rem;
}

.player-bar scale trough {
	all: unset;
	background-color: rgba($fg-alt, 0.3);
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.5);
	border-radius: .4rem;
	min-height: .25rem;
	min-width: 18rem;
  margin: .2rem 0;
}

.player-position {
	font-size: .9rem;
	font-weight: 500;
	color: $fg-alt;
}

.player-controls {
  font-size: 5rem;
	background-color: $bg-alt;
}

.player-toggle {
	font-size: 1.4rem;
	color: $fg;
}

.player-previous,
.player-next {
	font-size: 1.2rem;
	color: $fg-alt;
}

.player-toggle:hover,
.player-previous:hover,
.player-next:hover {
	color: $green;
}

.player-shuffle,
.player-loop {
	font-size: 1rem;
}

.spotify-icon {
	font-family: "Font Awesome 6 Brands";
	font-size: 1.25rem;
	color: $green;
	border-radius: .4rem;
}
.box-control {
  background-color: $bg-alt;
  padding: 1.5rem;
  margin: 1rem 1.5rem;
  border-radius: .4rem;

}

.time {
  font-size: 4rem;
}

.date {
  font-size: 1.3rem;
}

.timeboxes {
	font-size: .6rem;
  margin: -.1rem 0;

	.magenta {
		color: $magenta;
	}

	.green {
		color: $green;
	}

	.yellow {
		color: $yellow;
	}
}


.calendar {
    font-size: 1.1rem;
    font-weight: 500;
    background-color: $bg-alt;
    border-radius: .4rem;
    padding: .4rem;

    calendar {

      &.button {
        color: $fg-alt;

        &:hover {
          background-color: $black;
          border-radius: 1rem;
        }
      }

      &:selected {
        color: $green;
        text-shadow: 0 0 3px lighten($color: $bg-alt, $amount: 10%);
        border-radius: 1rem;
      }

      &.header {
        background-color: transparent;
        border: none;
      }

      &.highlight {
        color: $green;
      }

      &:indeterminate {
        color: $gray;
      }
    }
  }

  .system {
    .progress {
      background-color: $bg-alt;
      padding: .4rem;
      border-radius: .4rem;

      circular-progress {
        background-color: $black;

        &.ram {
          color: $magenta;
        }

        &.cpu {
          color: $yellow;
          label { margin-left: 1px;}
        }

        &.temp {
          color: $red;
          label { margin: .2rem .5rem .2rem .2rem;}

        }

        &.disk {
          color: $green;
        }
      }
    }

    .icon {
      font-size: 1.2rem;
      padding: 1.2rem;
    }

  }
