$color-alert-background: gold;
$color-alert-border: darken($color-alert-background, 12.5%);
$color-alert-inner-border: darken($color-alert-background, 6.25%);

.award-recommendation {
    background-color: $color-alert-background;
    border: 1px solid $color-alert-border;
    color: black;
    margin: auto auto 16px;

    &__login-link {
        color: currentColor;
        display: block;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }

        &:visited {
            color: currentColor;
        }
    }

    &__heading {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        padding: 10px 54px 10px 20px;
    }

    &__name {
        font-weight: 700;
    }

    &__form {
        margin: 0 20px 20px;
        border-top: 1px solid $color-alert-inner-border;
    }

    &__fieldset {
        margin: 20px 0 10px;
    }

    &__categories {
        display: block;

        @media (min-width:600px) {
            display: flex;
            flex-wrap: wrap;
        }
    }

    &__category {
        margin: 0 0 10px;

        @media (min-width: 600px) {
            flex: 0 0 50%;
        }

        @media (min-width: 960px) {
            flex: 0 0 25%;
        }
    }

    &__label {
        display: block;
        margin-right: 32px;
        position: relative;
        cursor: pointer;
    }

    &__checkbox {
        display: none;

        &:checked ~ .award-recommendation__label-text::after {
            content: '';
        }
    }

    &__label-text {
        display: block;
        padding-left: 32px;
        user-select: none;
        line-height: 24px;
        font-size: 16px;
        font-weight: 700;

        &::before,
        &::after {
            @include size(24px);

            left: 0;
            position: absolute;
        }

        &::before {
            background: transparent;
            border: 2px solid black;
            box-sizing: border-box;
            content: '';
            transition: background-color 125ms linear;
        }

        &:hover {

            &::before {
                background-color: white;
                transition: background-color 250ms linear;
            }
        }

        &::after {
            background: no-repeat black url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkgMTYuMkw0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40TDkgMTYuMnoiLz48L3N2Zz4=") center / cover;
            content: normal;
            top: 0;
        }
   }

    &__buttons {
        border-top: 1px solid $color-alert-inner-border;
        padding-top: 20px;

        @media (min-width: 600px) {
            display: flex;
            justify-content: flex-end;
        }
    }

    .button--ghost {
        background: transparent;
        border-color: black;
        color: black;
        display: block;
        padding: 0.75em 1em;
        width: 100%;

        &:hover {
            background: black;
            color: white;
        }

        @media (min-width: 600px) {
            display: inline-block;
            width: auto;
        }
    }

    &__inner {
        height: auto;
    }

    &.is-expandable {
        .award-recommendation__header {
            position: relative;
            cursor: pointer;

            &::after {
                @include size(24px);

                background: no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNy40MSAxNS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTRsLTYtNi02IDZ6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==") center / cover;
                content: '';
                position: absolute;
                right: calc( 20px - 6px );
                top: 50%;
                transform-origin: center;
                transform: translateY(-50%) scaleY(1);
                transition: transform 125ms ease-in-out;
            }
        }
    }

    &.is-closed {
        .award-recommendation__header::after {
            transform: translateY(-50%) scaleY(-1);
        }

        .award-recommendation__inner {
            overflow: hidden;
            height: 0;
        }
    }
}
