.aw-island {
    --island-icon-height: calc(1rem * theme('lineHeight.normal', 1.5));

    &__heading {
        display: grid;
        grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
        grid-template-areas:
            'icon title arrow'
            'icon description description'
            'options options options';

        margin: calc(-1 * var(--card-padding-y))
            calc(-1 * var(--card-padding-x));
        padding: var(--card-padding-y) var(--card-padding-x);

        &--togglable {
            cursor: pointer;
        }
    }

    &__icon-wrap {
        grid-area: icon;
        padding-right: theme('spacing.2', 0.5rem);
        max-width: calc(var(--island-icon-height) + theme('spacing.2', 0.5rem));
    }

    &__icon {
        font-size: var(--island-icon-height);
    }

    &__title-wrap {
        grid-area: title;
        align-self: center;
        min-width: 0;
    }

    &__description {
        grid-area: description;
        /* padding-top: theme('spacing.2', 0.5rem); */
        min-width: 0;
        padding-top: 5px;
    }

    &__options {
        grid-area: options;
        padding-top: theme('spacing.2', 0.5rem);
    }

    &__arrow-wrap {
        grid-area: arrow;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        color: var(--c-mono-400);

        max-height: var(--island-icon-height);
        padding-left: theme('spacing.2', 0.5rem);
    }

    &__arrow {
        transition: 180ms transform;
    }

    &__title {
        font-family: theme('fontFamily.heading');
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
    }

    &__content-wrap {
        margin: 0 calc(-1 * var(--card-padding-x));
    }

    &__content {
        padding: var(--card-padding-y) var(--card-padding-x) 0;
    }

    &__footer {
        display: flex;
        flex-wrap: wrap;
        padding: var(--card-padding-y) var(--card-padding-x) 0;
    }

    &__buttons {
        margin-left: auto;
    }
}

@screen md {
    .aw-island {
        --island-icon-height: calc(
            1rem * theme('lineHeight.normal', 1.5) +
                theme('fontSize.xs', 0.75rem) * theme('lineHeight.normal', 1.5)
        );

        &__heading {
            grid-template-columns: minmax(min-content, max-content) 1fr minmax(min-content, max-content) minmax(min-content, max-content);
            grid-template-areas:
                'icon title options arrow'
                'icon description options arrow';
        }

        &__icon-wrap {
            padding-right: theme('spacing.4', 1rem);
            max-width: calc(var(--island-icon-height) + theme('spacing.4', 1rem));
        }

        &__title-wrap {
            &--middle {
                grid-row: 1 / -1;
            }
        }

        &__description {
            align-self: center;
            /* padding-top: 0; */
        }

        &__options {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            padding-top: 0;
            padding-left: theme('spacing.4', 1rem);

            max-height: var(--island-icon-height);
        }

        &__arrow-wrap {
            align-self: stretch;
            padding-left: theme('spacing.4', 1rem);
        }
    }
}