@mixin panel-variant($name, $color, $color-bg) {
    .ons-panel {
        &--#{$name} {
            background: $color-bg;
            border-color: $color;
            outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
        }

        &--#{$name} & {
            &__header {
                background: $color;
            }
        }
    }
}

.ons-branded-warning {
    background: var(--ons-color-branded-tertiary);
}

.ons-announcement {
    background-color: var(--ons-color-black);
}

.ons-branded-warning,
.ons-announcement {
    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
}

.ons-panel {
    border-radius: 0;
    position: relative;

    // Removes inherited bottom margin to make whitespace inside panel equal
    > *:last-child {
        @extend .ons-u-mb-no;
    }

    .ons-field {
        @extend .ons-u-mb-no;
    }

    &:focus {
        box-shadow: none;
        outline: 4px solid var(--ons-color-focus) !important;
    }

    &__header {
        border-radius: 0;
        color: var(--ons-color-text-inverse);
        margin: 0;
        padding: 0.75rem 1rem;
    }

    &__timer {
        white-space: nowrap;
    }

    &__title {
        margin: 0;
    }

    &__body {
        padding: 1rem;

        // Removes inherited bottom margin to make whitespace inside panel equal
        > *:last-child,
        strong > *:last-child {
            @extend .ons-u-mb-no;
        }

        &.ons-icon-margin--3xl {
            padding-left: 2.7rem !important;

            @include mq(m) {
                padding-left: 3.5rem !important;
            }
        }
        &.ons-icon-margin--2xl {
            padding-left: 2.45rem !important;

            @include mq(m) {
                padding-left: 2.9rem !important;
            }
        }
        &.ons-icon-margin--xl {
            padding-left: 2.35rem !important;

            @include mq(m) {
                padding-left: 2.55rem !important;
            }
        }
        &.ons-icon-margin--l {
            padding-left: 2.25rem !important;

            @include mq(m) {
                padding-left: 2.35rem !important;
            }
        }
        &.ons-icon-margin--m {
            padding-left: 2.05rem !important;

            @include mq(m) {
                padding-left: 2.2rem !important;
            }
        }
        &.ons-icon-margin--s {
            padding-left: 1.7rem !important;
        }
    }

    &__error {
        color: var(--ons-color-errors);
    }

    &--warn {
        border: 0 !important;
        margin-bottom: 1rem;
        outline: none !important;
        padding: 0;

        &--footer {
            background-color: var(--ons-color-grey-15) !important;
            @extend .ons-u-mb-no;

            padding: 1rem 0 !important;
        }
    }

    &--warn-branded,
    &--announcement {
        border: 0 !important;
        color: var(--ons-color-white);
        @extend .ons-u-mb-no;

        outline: none !important;
        padding: 1rem 0 !important;
        a {
            color: inherit;
            text-decoration: underline solid var(--ons-color-white) 1px;
        }
        a:hover {
            text-decoration-thickness: 2px;
        }
    }

    &--announcement {
        a:focus {
            box-shadow:
                0 -2px var(--ons-color-focus),
                0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
        }
    }

    &--no-title {
        border-left: 8px solid transparent;
        padding: 1rem;
        .ons-panel__body {
            background: none;
            padding: 0;
        }
        &.ons-panel--warn {
            padding: 0;
        }
    }

    &--spacious {
        padding: 1rem;

        @include mq(m) {
            padding: 2rem;
        }
    }

    &--warn &,
    &--warn-branded &,
    &--announcement & {
        &__body {
            font-weight: $font-weight-bold;
            min-height: 2rem; // Height of icon
            padding: 0.222rem 0 0.222rem 2.8rem; // Alignment tweak
        }
        &__icon {
            background: var(--ons-color-black);
            border-radius: 50%;
            color: var(--ons-color-white);
            font-size: 1.5rem;
            font-weight: $font-weight-bold;
            line-height: 2rem;
            min-height: 2rem;
            min-width: 2rem;
            outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
            text-align: center;
        }
    }

    &--announcement & {
        &__body div > *:last-child {
            margin-bottom: 0;
        }

        &__icon {
            top: 1.2rem;
            background-color: var(--ons-color-white);
            color: var(--ons-color-black);
            display: flex;
            svg {
                margin: auto;
            }
        }
    }

    &--warn-branded & {
        &__icon {
            background-color: var(--ons-color-white);
            color: var(--ons-color-branded-tertiary);
        }
    }

    &--success & {
        &__icon {
            left: 0;
            top: 0.875rem;
            padding-left: 1rem;
            .ons-icon {
                fill: var(--ons-color-success) !important;
            }
        }
    }

    &__icon + &__body {
        padding-left: 2rem;
    }

    &--bare & {
        &__icon {
            top: -0.2rem;
            height: 1.3rem;
            width: 1.3rem;
        }
        &__body {
            padding: 0 0 0 1.5rem;
        }
    }

    &--info,
    &--bare,
    &--success,
    &--warn,
    &--pending,
    &--warn-branded,
    &--announcement {
        .ons-panel__icon {
            position: absolute;
        }
    }
}

@include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));
@include panel-variant(success, var(--ons-color-success), var(--ons-color-success-tint));
@include panel-variant(pending, var(--ons-color-pending), var(--ons-color-pending-tint));
@include panel-variant(info, var(--ons-color-info), var(--ons-color-info-tint));
@include panel-variant(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
@include panel-variant(warn, transparent, transparent);
@include panel-variant(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
@include panel-variant(announcement, var(--ons-color-black), var(--ons-color-black));