:root {
    --reps-width: 5ch;
    --weight-width: 10ch;

    box-sizing: border-box;
}

.workout ::part(form-control-label)::after {
    display: none;
}

.workout {
    --sl-spacing-large: var(--vertical-spacing);
    --sl-input-spacing-medium: 0.5rem;
}

.workout h1 {
    font-size: 1.5rem;
    display: inline;
}
/* 
.workout sl-format-date {
    float: right;
} */

.set {
    display: flex;
    gap: var(--horizontal-spacing);
    justify-content: space-between;
}

.repss {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: var(--vertical-spacing);
    column-gap: var(--horizontal-spacing);
}

.reps {
    width: var(--reps-width);
}

.weight {
    width: var(--weight-width);
}

@media (max-width: 900px) {
    .workout :is(.reps, .weight) {
        --sl-input-spacing-medium: var(--horizontal-spacing);
    }

}

.input-button sl-input {
    display: flex;
    flex-direction: row;
}

sl-input>sl-button {
    margin-inline-end: 0;
}

/* Fix for start-exercise component in sl-card */
start-exercise {
    display: block;
    width: 100%;
    margin: var(--vertical-spacing) 0;
}

.controls {
    margin-top: var(--vertical-spacing);
}

.controls> :not(:first-child) {
    margin-top: var(--vertical-spacing);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.workout-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--vertical-spacing);
}

.exercise-form [slot='header'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exercise-form h2 {
    font-size: 1.1rem;
    margin: 0;
}

.sets p {
    margin: 0;
}

.exercise-form [slot='header'] sl-icon-button {
    font-size: var(--sl-font-size-large);
}

.set-group> :not(first-child) {
    margin-top: var(--vertical-spacing);
}

.workout h2 {
    font-size: 1.2rem;
}

.current-workout .actions {
    margin-top: var(--vertical-spacing);
}

.set+.set {
    margin-top: var(--vertical-spacing);
}

.sets:not(:first-child),
.sets> :not(:first-child) {
    margin-top: var(--vertical-spacing);
}

.sets header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.workout {
    width: 100%;
}

.sl-toast-stack {
    top: auto;
    bottom: 0;
    right: auto;
}