.SuiteCard {
    background-color: white; // TODO: var(--backgrounds-cards-default);
    border-radius: var(--radius-medium);
    padding: var(--padding-medium-large);
    box-shadow: 1px 1px 4px 1px #0d243514; // TODO: box-shadow var
    position: relative;
    display: flex;
    width: 100%;

    &-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--padding-medium-small);

        &-content {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--padding-medium-small);
        }
    }

    &-clickable {
        padding: 0;
        cursor: default;
        color: var(--text-primary);

        .SuiteCard-header {
            padding-bottom: var(--padding-extra-small);
        }

        .SuiteCard-body {
            padding: var(--padding-medium-small) var(--padding-medium-large);
        }

        &:not(.disabled) {
            cursor: pointer;
            &:hover {
                background-color: var(--container-fills-backgrounds-card-hover);
                color: var(--text-primary);
            }
        }
    }

    &-header + .SuiteCard-body {
        margin-top: var(--padding-medium-large);

        &.ExpandableBody-collapsed {
            margin-top: 0;
        }
    }

    &.horizontal {
        flex-direction: row;
        align-items: center;

        .SuiteCard-body {
            flex: 1;
        }
    }
    &.vertical {
        flex-direction: column;

        > .CoverArt {
            margin: var(--padding-medium) var(--padding-large);
            align-self: center;
        }
    }

    &-title {
        @include text-heading(4);
    }

    &.disabled {
        &::after {
            position: absolute;
            content: ' ';
            display: block;
            background-color: white;
            opacity: 0.5;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .SuiteCard-header {
            .btn:not(:disabled),
            [role='button']:not([aria-disabled='true']) {
                z-index: 1;
            }
        }
    }
}