.icon {
    width: 20px;
    height: 20px;
    transition: fill $transition;
    fill: $color--white;

    &:hover {
        fill: darken($color--white, 20%);
    }

    &--home {
        width: 15px;
        height: 15px;
        margin-right: 5px;
        fill: $color--primary;
    }

    &--footer-social {
        @include media-query(tablet-portrait) {
            margin-right: 10px;
        }
    }

    &--mobile-menu {
        width: 32px;
        height: 28px;
    }

    &--footer-credit {
        width: 70px;
        height: 45px;
        margin-right: 3rem;
    }

    &--person {
        width: 15px;
        height: 15px;
        margin-right: 5px;
        transition: fill $transition;
        fill: $color--white;

        .button:hover & {
            fill: $color--dark-blue;
        }

        .header--has-bg-image & {
            fill: $color--dark-blue;
        }

        .search-open & {
            fill: $color--white;
        }
    }

    &--card-pixels {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 35px;
        height: 52px;
    }
}