/*
 * SPDX-FileCopyrightText: 2025 Ncam Gnrvngu <info@ncamgnrvngu.eu>
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

#player {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#title {
  text-align: center;
}

#controls {
  align-items: center;
  display: flex;
}

#playbutton {
  width: 10%;
  aspect-ratio: 1/1;
}

.seek {
  outline: none;
  -webkit-appearance: none;
}

.seek {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 80%;
  --thumb-height: 1.125em;
	--track-height: 0.125em;
	--brightness-hover: 180%;
	--brightness-down: 80%;
	--clip-edges: 0.125em;
  color: #f07167;
  --track-color: rgba(255, 255, 255, 0.1);
}

.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.seek:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.seek::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}