1.audio-player {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  width: 300px;
6  height: 80px;
7  background-color: #282828;
8  border-radius: 8px;
9  padding: 8px;
10  box-sizing: border-box;
11}
12
13.album-cover {
14  width: 64px;
15  height: 64px;
16  background-color: #fff;
17  border-radius: 50%;
18  margin-right: 12px;
19}
20
21.player-controls {
22  flex-grow: 1;
23  display: flex;
24  flex-direction: column;
25}
26
27.song-info {
28  margin-bottom: 4px;
29}
30
31.song-title {
32  font-size: 16px;
33  color: #fff;
34  margin: 0;
35}
36
37.artist {
38  font-size: 12px;
39  color: #b3b3b3;
40  margin: 0;
41}
42
43.progress-bar {
44  width: 100%;
45  height: 4px;
46  background-color: #4f4f4f;
47  border-radius: 2px;
48  overflow: hidden;
49}
50
51.progress {
52  width: 50%;
53  height: 100%;
54  background-color: #1db954;
55  transform-origin: left;
56  animation: progress-animation 10s linear infinite;
57}
58
59.buttons {
60  display: flex;
61}
62
63button {
64  background: none;
65  border: none;
66  cursor: pointer;
67  outline: none;
68}
69
70.play-btn,
71.pause-btn {
72  font-size: 16px;
73  color: #fff;
74  margin-right: 8px;
75  transition: transform 0.2s ease-in-out;
76}
77
78.play-btn:hover,
79.pause-btn:hover {
80  transform: scale(1.2);
81}
82
83@keyframes progress-animation {
84  0% {
85    transform: scaleX(0);
86  }
87
88  100% {
89    transform: scaleX(1);
90  }
91}
92