@import '../../../styles/fills';
@import '../../../styles/mixins';

$card-button-bgcolor: $red-56;

.resourceCard {
    &_container {
        width: 100%;
        height: 100%;
    }
    
    &_iframe {
        display: block;
        min-width: 130px;
        border: 1px solid $dark-gray;
        border-radius: 3px;
        outline: none;
        overflow: hidden;
        line-height: 1;

        &--size-1 {
            width: 100%;
            height: 332px;
            max-width: 632px;
        }

        &--size-2 {
            width: 100%;
            height: 332px;
            max-width: 632px;
        }

        &--size-3 {
            width: 100%;
            height: 232px;
            max-width: 412px;
        }

        &--size-4 {
            width: 100%;
            height: 232px;
            max-width: 412px;
        }

        &--size-5 {
            width: 100%;
            height: 202px;
            max-width: 412px;
        }
    }

    &_header {
        @include text-3;
        font-weight: bold;
        line-height: 23px;
        margin-top: 15px;
    }

    &_pdfLink {
        @include link-colors($link-text-color);
    }

    &_textSection {
        @include text-4;
        display: inline-block;
        height: auto;
        width: auto;
        line-height: 25px;
        margin-top: 10px;
        min-width: 130px;

        &--size-1 {
            width: 100%;
            max-width: 632px;
        }

        &--size-2 {
            width: 100%;
            max-width: 632px;
        }

        &--size-3 {
            width: 100%;
            max-width: 412px;
        }

        &--size-4 {
            width: 100%;
            max-width: 412px;
        }

        &--size-5 {
            width: 100%;
            max-width: 412px;
        }  
    }

    &_linkGroup {
        width: 100%;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    &_linkGroup:hover &_linkText, &_linkGroup:focus &_linkText {
        text-decoration: underline;
    }

    &_pdf {
        padding: 12px 0 0 0;
    }
    
    &_icon {
        padding: 7px 4px 6px 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        background-color: $card-button-bgcolor;
        @include text-6;
        font-weight: 500;
        line-height: 19px;
        color: $white;
    }

    &_linkText {
        @include link-colors($link-text-color);
        @include text-4;
        line-height: 18px;
    }

    &_icon + &_linkText {
        padding-left: 14px;
    }
}
