@import '../../../../../../styles/mixins.scss';
@import '../../../../../../styles/shared/footer.scss';

// Component Variables
$social-item-spacing-x: 15px;
$social-item-spacing-y: 5px;

// Component Styles
.footerSocials {
    &_title {
        @extend %footer-title;
    }

    &_title + &_list {
        padding-top: $footer-title-spacing-bottom;
    }

    &_list {
        @extend %reset-list;
        display: flex;
        flex-wrap: wrap;
        margin: ($social-item-spacing-y * -1) ($social-item-spacing-x * -1);

        &--align-right {
            justify-content: flex-end;
        }
    }

    &_item {
        display: flex;
        align-items: center;
        margin-top: $social-item-spacing-y;
        margin-bottom: $social-item-spacing-y;
        padding-left: $social-item-spacing-x;
        padding-right: $social-item-spacing-x;
    }

    &_link {
        display: flex;
        transition: opacity 0.3s ease;

        &:hover, &:focus {
            opacity: 0.7;
        }
    }

    &_icon {
        height: auto;
        width: 25px;
        fill: var(--footer-social-icon-color, $footer-text-color);
    }

    &_text {
        @extend %sr-only;
    }
}
