@use '../../styles/design-system.scss' as *;

@mixin buttonImageBase {
    width: 21px;
    margin-top: -3px;
};

@mixin downloadButtonBase {
    height: fit-content;
    @include u-margin-top(3);
    
    .buttonContainer {
        display: flex;

        .buttonText {
            @include u-margin-right(1);
            }
        
        .buttonImageYellow {
            @include buttonImageBase();
            filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%);
        }

        .buttonImageGray {
            @include buttonImageBase();
            filter: invert(100%) sepia(0%) saturate(7489%) hue-rotate(232deg) brightness(101%) contrast(101%);
        }

        .buttonImageBlue {
            @include buttonImageBase();
            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(137deg) brightness(103%) contrast(101%);
        }
    }
}

.downloadButtonLink{
    display: flex;
    text-decoration: none;
    justify-content: center;

    .buttonComponentYellow {
        @include downloadButtonBase;
        @include u-text("blue-70v");
        @include u-bg("yellow-20v");
        &:hover {
            @include u-bg("yellow-20");
            @include u-text("gray-90");
            }
    }

    .buttonComponentGray {
        @include downloadButtonBase;
        @include u-text("white");
        @include u-bg("gray-60");
        &:hover {
            @include u-bg("gray-90");
            @include u-text("gray-10");
            }
    }
    
    .buttonComponent {
       @include downloadButtonBase;
    }
}
