[data-controller~="node"].fade {
    transition:
        opacity .15s linear,
        transform .3s ease-out,
        height .3s ease-out,
        margin .3s ease-out
    ;

    transform: translate(0, -50px);

    &.show {
        transform: none;
    }
}

[data-controller~="session"] {
    margin: 1rem;

    > * {
        margin: 0;
    }

    :is(
        [data-comment-target],
        [data-session-target],
        [data-exercise-target],
        [data-set-target]
    ):is(
        input:not([type="checkbox"]),
        textarea,
        select,
        [data-allow-mentions]
    ) {
        field-sizing: content;
        min-height: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: auto;
        resize: none;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: var(--bs-secondary);
            opacity: .5;
        }
    }

    [data-session-target="title"] {
        font-size: 1.5rem;
        line-height: normal;
        text-align: center;
        margin: 0 0 .5rem;
    }

    [data-session-target="date"],
    [data-timer-target="display"] {
        font-size: 1rem;
        font-weight: 300;
        text-align: center;
        margin: 0 0 2rem;
        min-height: 24px;
    }

    [data-session-target="children"] {
        > :not(:last-of-type) {
            margin: 0 0 2rem;
        }
    }

    [data-session-target="add"] {
        > button {
            position: fixed;
            bottom: 0;
            right: 0;
            margin: 1rem;
            z-index: 1051;

            > i::before {
                font-weight: bold !important;
            }

            + .modal {
                > .modal-dialog {
                    position: fixed;
                    bottom: 62px;
                    right: 0;
                    margin: 1rem;

                    > .modal-content {
                        background: none;
                        border: none;
                        align-items: end;
                        gap: .75rem;

                        > button {
                            width: fit-content;
                        }
                    }
                }
            }
        }
    }

    [data-session-target="stop"] {
        > button {
            position: fixed;
            bottom: 0;
            left: calc(45.6px + .5rem);
            margin: 1rem;
            z-index: 1049;
            border-radius: 50%;
        }
    }

    [data-timer-target="controls"] {
        > button {
            position: fixed;
            bottom: 0;
            left: 0;
            margin: 1rem;
            z-index: 1049;
            border-radius: 50%;
        }
    }

    [data-exercise-target="type"] {
        font-size: 1.25rem;
        line-height: normal;
        margin: 0 0 .5rem;
    }

    [data-exercise-target="variation"] {
        font-size: 1rem;
        font-weight: 300;
        margin: 0 0 1rem;
    }

    [data-exercise-target="children"] {
        > * {
            margin: 0 0 1rem;
        }
    }

    [data-exercise-target="add"] {
        text-decoration: none;
        padding: 0;
    }

    :has(> [value="App\\Entity\\Training\\Set"]), .set {
        display: flex;
        align-items: center;
        gap: .5rem;
        height: 24px;
    }

    :has(> [data-set-target="repetitions"]) {
        display: flex;
        align-items: center;
        gap: .5rem;

        &::after {
            content: '×';
            opacity: .75;
        }
    }

    :has(> [data-set-target="weight"]) {
        display: flex;
        align-items: center;
        gap: .5rem;

        &::after {
            content: 'kg';
            opacity: .75;
        }
    }

    :has(> [data-set-target="comment"]) {
        flex-grow: 1;
        overflow: hidden;
    }

    [data-set-target="comment"] {
        font-style: italic;
        width: 100%;
    }

    [data-comment-target="text"] {
        font-style: italic;
    }

    [data-set-target="delete"] {
        text-decoration: none;
        padding: 0;
    }

    [data-set-target="checked"]:disabled {
        opacity: 1;
    }
}