@use "../variables" as vars;
@use "../functions" as func;

@mixin add-background-svg($image-name) {
    background-image: url("#{vars.$icons-folder-path}#{$image-name}.svg");
    background-size: func.units(5, 'rem');
    background-repeat: no-repeat;
}

@mixin button-unstyled {
    background-color: func.color('transparent');
    border: 0;
    border-radius: 0;
    font-weight: func.font-weight("normal");
    margin: 0;
    padding: 0;
    text-align: left;
    color: inherit;
    min-height: auto;

    &:hover,
    &:focus {
        background-color: func.color('transparent');
        color: inherit;
    }
}

@mixin focus-outline {
    outline: vars.$theme-focus-width vars.$theme-focus-style func.color("focus");
}

@mixin focus-offset {
    outline-offset: vars.$theme-focus-offset;
}

@mixin focus {
    @include focus-outline;
    @include focus-offset;
}

// Screen reader only helper
@mixin sr-only() {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    user-select: none;
    white-space: nowrap;
}

// Unstyled list helper
@mixin unstyled-list() {
    margin: 0;
    list-style-type: none;
    padding-left: 0;

    > li {
        margin-bottom: 0;
        margin-top: 0;
        padding-left: 0;

        &::before {
            content: "" !important;
            padding-right: 0 !important;
        }
    }
}

// nobullet list helper
@mixin nobullet-list() {
    list-style-type: none;
    padding-left: 0;

    > li {
        padding-left: 0;

        &::before {
            content: "" !important;
            padding-right: 0 !important;
        }
    }
}

// noindent list helper
@mixin noindent-list() {
    > li {
        padding-left: calc(8px + 6px);

        &::before {
            left: 0;
        }
    }
}

// Appearance
@mixin appearance-none {
    appearance: none;
}