@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;

.social-media{
    list-style: none!important;
    position: fixed;
    top: 120px;
    right: 0;
    height: fit-content;
    padding: 9px;
    z-index: 998;
    background-color: $white-color;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    box-shadow: -8px 8px 16px -14px $dark-gray;
    @include responsive(tablet){
        padding: 16px;
        gap: 20px;
        box-shadow: -10px 10px 26px -14px $dark-gray;

    }
    &__single{
        opacity: .6;
        transition: all .3s ease-in-out;
        margin-left: 0!important;
        a{
            display: grid;
            place-items: center;
        }
        .icon{
            width: 26px;
            height: auto;
            object-fit: cover;
            @include responsive(tablet){
                width: 32px;                    
            }
        }
        &:hover{
            opacity: 1;
        }
    }
}