@import 'elevations';

$sd-card-padding-mobile: 24px;
$sd-card-padding-level-0: 16px;
$sd-card-padding-level-1: 24px;
$sd-card-padding-level-2: 32px;
$sd-card-padding-level-3: 40px;

$sd-card-action-icon-gutter-mobile: 16px;
$sd-card-action-icon-gutter-desktop: 24px;

$sd-card-corner: $sd-corner-radius;

@mixin card-lane-modifications {
    padding: $sd-card-padding-level-0;
    @include sd-elevation(2);
    @include sd-viewport($sd-desktop) {
        padding: $sd-card-padding-level-1;
        @at-root a#{&} {
            // hover & focus style only on <a> selector
            &:hover,
            &:focus {
                @include sd-elevation(3);
            }
        }
    }
    @include sd-viewport($sd-mobile) {
        border-radius: $sd-card-corner;
    }
}

.sd-card {
    position: relative;
    padding: $sd-card-padding-mobile; //mobile padding for all cards
    background: $white;
    visibility: visible;
    transition: 0.2s all ease-in-out;

    @include sd-viewport($sd-tablet-plus) {
        width: auto;
        border-radius: $sd-card-corner; // by default, desktop/tablet sizes have border radius, mobile does not because cards are full bleed by default.
    }

    &.mod-has-gutter {
        $card-gutter: 8px;

        border-radius: $sd-card-corner;

        @include sd-viewport($sd-mobile) {
            margin: auto $card-gutter;
            width: calc(100% - #{2 * $card-gutter});
        }
    }

    &.mod-no-padding {
        padding: 0;
    }

    &.mod-no-border-radius {
        border-radius: 0;
    }

    // mobile-only modifications
    @include sd-viewport($sd-mobile) {
        &.mod-add-border-radius-mobile {
            border-radius: $sd-card-corner;
        }
    }

    &.mod-card-0 {
        padding: $sd-card-padding-level-0;

        //action icons with headers:
        .card-header button.action-icon {
            top: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-0);
            right: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-0);

            @include sd-viewport($sd-desktop) {
                top: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-0);
                right: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-0);
            }
        }
    }

    &.mod-card-1 {
        @include sd-viewport($sd-desktop) {
            padding: $sd-card-padding-level-1;
        }

        //action icons with headers:
        .card-header button.action-icon {
            top: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-1);
            right: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-1);

            @include sd-viewport($sd-desktop) {
                top: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-1);
                right: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-1);
            }
        }
    }

    &.mod-card-2 {
        @include sd-viewport($sd-desktop) {
            padding: $sd-card-padding-level-2;
        }

        //action icons with headers:
        .card-header button.action-icon {
            top: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-2);
            right: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-2);

            @include sd-viewport($sd-desktop) {
                top: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-2);
                right: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-2);
            }
        }
    }

    &.mod-card-3 {
        @include sd-viewport($sd-desktop) {
            padding: $sd-card-padding-level-3;
        }

        //action icons with headers:
        .card-header .action-icon {
            top: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-3);
            right: ($sd-card-action-icon-gutter-mobile - $sd-card-padding-level-3);

            @include sd-viewport($sd-desktop) {
                top: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-3);
                right: ($sd-card-action-icon-gutter-desktop - $sd-card-padding-level-3);
            }
        }
    }

    // card style for YouDot Lanes
    &.mod-card-lane {
        @include card-lane-modifications;
    }

    //close icon
    .dismiss-button {
        $dismiss-button-tap-size: 44px;
        $dismiss-button-icon-size: 32px;

        position: absolute;
        top: 8px;
        right: 8px;
        padding: ($dismiss-button-tap-size - $dismiss-button-icon-size) * 0.5;

        .dismiss-icon,
        svg {
            fill: $gray7;
        }

        &:hover,
        &:focus {
            .dismiss-icon,
            svg {
                fill: $gray8;
            }
        }
    }
    &.dismissed {
        visibility: hidden;
        opacity: 0;
    }

    // This class is globally available in Youdot but not in Styledot.
    // It is added here to avoid a Youdot dependency.
    &.hide {
        display: none;
    }

    //action icons
    > button.action-icon {
        position: absolute;
        top: $sd-card-action-icon-gutter-mobile;
        right: $sd-card-action-icon-gutter-mobile;

        @include sd-viewport($sd-desktop) {
            top: $sd-card-action-icon-gutter-desktop;
            right: $sd-card-action-icon-gutter-desktop;
        }
    }
    .card-header {
        display: flex;
        align-items: flex-start;

        .card-title {
            width: calc(100% - 5px);
            margin-right: 5px;
        }

        .icon {
            position: relative;
            order: 1;
        }
    }
}

a.sd-card {
    display: block;
    color: $base-font-color;
    font-weight: $sd-font-weight-regular;
    @include sd-viewport($sd-desktop) {
        @for $i from 1 to 5 {
            &.sd-elevation-#{$i} {
                &:hover {
                    @include sd-elevation($i + 1);
                }
            }
        }
        &:hover,
        &:active,
        &:focus {
            text-decoration: none;
            color: unset;
        }
    }
}