/* Tracks */

.tracks {
    max-width: 800px;
    padding: 0 20px;
    margin: 0 auto;
}

.createTrack {
    display: inline-block;
    background: var(--blurple);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: var(--radius);
    transition: 0.1s ease;
    margin-bottom: 20px;
}

.createTrack:hover {
    background: #7289da;
}

/* Sort Controls */

.sortControls {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lightgray);
    margin-bottom: 20px;
}

.sortControls a {
    color: var(--lightgray);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
}

.sortControls a.activeSort {
    color: var(--blurple);
    border-color: var(--blurple);
    font-weight: bold;
}

/* Track List */

.track {
    background: var(--darkgray);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
    padding: 15px 20px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 5px 15px;
}

.track .name {
    grid-column: 1 / 3;
    grid-row: 1;
    font-size: 1.25em;
    font-weight: bold;
}

.track .bpm,
.track .creationDate {
    grid-row: 2;
    color: var(--lightgray);
}

.track .bpm {
    grid-column: 1;
}

.track .creationDate {
    grid-column: 2;
}

.editTrack,
.shareButton,
.duplicateButton,
.deleteButton {
    grid-row: 1 / 3;
    color: white;
    border: none;
    text-decoration: none;
    padding: 10px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editTrack img,
.shareButton img,
.duplicateButton img,
.deleteButton img {
    width: 20px;
    height: 20px;
    display: block;
}

.editTrack {
    grid-column: 3;
    background: var(--gray);
}

.editTrack:hover {
    background: #445a70;
}

.duplicateButton {
    grid-column: 4;
    background: var(--gray);
}

.duplicateButton:hover {
    background: #445a70;
}

.shareButton {
    grid-column: 5;
    background: #16a34a;
}

.shareButton:hover {
    background: #22c55e;
}

.deleteButton {
    grid-column: 6;
    background: #dc3545;
}

.deleteButton:hover {
    background: #e35d6a;
}

/* Responsive Styles */

@media (max-width: 768px) {
    .track {
        grid-template-columns: 1fr auto auto auto auto;
        grid-template-rows: auto;
    }

    .track .name {
        grid-column: 1;
        grid-row: 1;
    }

    .track .bpm,
    .track .creationDate {
        display: none;
    }

    .editTrack,
    .shareButton,
    .duplicateButton,
    .deleteButton {
        grid-row: 1;
    }
}