/*
 * Kokoelmien linkkipainikkeet.
 * Koja-sininen täysleveä painike; ikoni valitaan LibraryLink.icon-kentästä.
 * Kontrastit: valkoinen teksti #0071b7:llä 5.19:1, hoverissa #005a92:lla 7.30:1.
 */

.library-link-button {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 1.25rem 1.25rem 1.25rem 5rem;
    background: #0071b7;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.5s ease-in-out;
}

/*
 * Ikoni piirretään maskilla, jolloin väri tulee currentColorista eikä
 * jokaista värivaihtoehtoa varten tarvita omaa SVG-tiedostoa.
 * Nuoli on perusluokassa, joten tyhjä tai tuntematon icon-arvo
 * näytetään nuolena eikä ilman ikonia.
 */
.library-link-button::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
    mask: url("../images/arrow-right.svg") center / contain no-repeat;
}

/* Rattaiden viewBox on 640x512, joten leveämpi laatikko pitää ikonin
   yhtä korkeana kuin nuolen. */
.library-link-button--spare-parts::before {
    width: 40px;
    -webkit-mask-image: url("../images/gears.svg");
    mask-image: url("../images/gears.svg");
}

.library-link-button:hover,
.library-link-button:focus {
    background: #005a92;
    color: #fff;
}

.library-link-button:focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 2px;
}

/*
 * Maskia tukemattomissa selaimissa ikoni jätetään kokonaan pois,
 * jotta painikkeeseen ei jää yksiväristä laatikkoa.
 */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
    .library-link-button {
        padding-left: 1.25rem;
    }

    .library-link-button::before {
        display: none;
    }
}

@media screen and (max-width: 39.9375em) {
    .library-link-button {
        padding: 1rem 1rem 1rem 4rem;
        font-size: 1rem;
    }

    .library-link-button::before {
        left: 1rem;
        width: 26px;
        height: 26px;
    }

    .library-link-button--spare-parts::before {
        width: 32px;
    }
}