@mixin material-transition { transition: .25s cubic-bezier(0,0,0.2,1) }

@mixin search-bar-hover {
    @if $search-bar-hover {
        @include shadow-2dp;
        background: $search-bar-focus-color;
    }
}

@mixin card-elevation($elevation) {
    border-radius: $card-radius;
    background: $card-bg-color;

    @if $elevation {
        @include shadow-1dp;
        border: none;
    } @else {
        box-shadow: none;
        border: 1px solid $border-color;
    }
}

@mixin chip-type($chip-type) {
    @if $chip-type == contained {
        background: $contained-chip-color;

        &.active { background-color: $contained-chip-selected-color }

        &:hover { background-color: $contained-chip-selected-color }
    }

    @if $chip-type == outlined {
        background: $outlined-chip-color;
        border: 1px solid $outlined-chip-selected-border-color;
    
        &.active { background-color: $outlined-chip-selected-color }
    
        &:hover { background: $outlined-chip-hover-color }
    }
}

@mixin button-type($button-type) {
    border-radius: $button-radius;
    display: inline-block;
    font-weight: 500;
    
    @if $button-type == contained {
        @if $button-shadow { @include shadow-1dp }
        background: $contained-button-color;
        color: $contained-button-text-color;

        &:hover { background: $contained-button-hover-color }

        &:focus { background: $contained-button-color }
    }

    @if $button-type == outlined {
        box-shadow: none;
        background: transparent;
        color: $outlined-button-color;
        border: 1px solid $outlined-button-color;

        &:hover { background: $outlined-button-hover-color }

        &:focus { background: $outlined-button-hover-color }
    }

    @if $button-type == text {
        box-shadow: none;
        background: transparent;

        &:hover { background: $text-button-hover-color }

        &:focus { background: $text-button-focus-color }
    }
}

@mixin button-shadow {
    @if $button-shadow {
        button.btn,
        .button,
        .block-button,
        .input-copy button,
        .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
    }
}

@mixin text-area-border($text-area-border) {
    background: $text-field-bg-color;
    color: $text-field-color;

    &:hover { border-color: $border-hover-color }

    @if $text-area-border == underlined {
        border-radius: $card-radius $card-radius 0 0;
        border: 0;
        border-bottom: 1px solid $border-color;

        &:active,
        &:focus { border-bottom: 2px solid $border-active-color }
    }

    @if $text-area-border == outlined {
        border-radius: $card-radius;
        border: 1px solid $border-color;

        &:active,
        &:focus { border: 2px solid $border-active-color }
    }
}

@mixin icon-button {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
}

// check background-image value
@mixin bg-image {
    @if $bg-image == none {        
    } @else { background-image: url($bg-image) }
}


@mixin icon-font-style {
    @if $icon-font-style == filled { font-family: "Material Icons" }
    @if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
    @if $icon-font-style == round { font-family: "Material Icons Round" }
    @if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
    @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
}

@mixin icon-font {
    @if $icon-font-source == github {
        @if $icon-font-style == filled {
            @font-face {
                font-family: "Material Icons";
                src: local("Material Icons"),
                     url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
            }
        }
        @if $icon-font-style == outlined {
            @font-face {
                font-family: "Material Icons Outlined";
                src: local("Material Icons Outlined"),
                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == round {
            @font-face {
                font-family: "Material Icons Round";
                src: local("Material Icons Round"),
                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == sharp {
            @font-face {
                font-family: "Material Icons Sharp";
                src: local("Material Icons Sharp"),
                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == two-tone {
            @font-face {
                font-family: "Material Icons Two Tone";
                src: local("Material Icons Two Tone"),
                     url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
            }
        }
    }

    @if $icon-font-source == google {
        @if $icon-font-style == filled {
            @font-face {
                font-family: "Material Icons";
                src: local("Material Icons"),
                     url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
            }
        }
        @if $icon-font-style == outlined {
            @font-face {
                font-family: "Material Icons Outlined";
                src: local("Material Icons Outlined"),
                     url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
            }
        }
        @if $icon-font-style == round {
            @font-face {
                font-family: "Material Icons Round";
                src: local("Material Icons Round"),
                     url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
            }
        }
        @if $icon-font-style == sharp {
            @font-face {
                font-family: "Material Icons Sharp";
                src: local("Material Icons Sharp"),
                     url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
            }
        }
        @if $icon-font-style == two-tone {
            @font-face {
                font-family: "Material Icons Two Tone";
                src: local("Material Icons Two Tone"),
                     url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
            }
        }
    }

    @if $icon-font-source == self {
        @if $icon-font-style == filled {
            @font-face {
                font-family: "Material Icons";
                src: local("Material Icons"),
                     url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
            }
        }
        @if $icon-font-style == outlined {
            @font-face {
                font-family: "Material Icons Outlined";
                src: local("Material Icons Outlined"),
                     url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == round {
            @font-face {
                font-family: "Material Icons Round";
                src: local("Material Icons"),
                     url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == sharp {
            @font-face {
                font-family: "Material Icons Sharp";
                src: local("Material Icons Sharp"),
                     url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
            }
        }
        @if $icon-font-style == two-tone {
            @font-face {
                font-family: "Material Icons Two Tone";
                src: local("Material Icons Two Tone"),
                     url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
            }
        }
    }
}

@mixin version-check($name, $plugin-version, $target-version, $website) {
    @if $target-version != $version {
        @debug "[Info] #{$name} #{$plugin-version} is made for Mastodon Material #{$target-version}. Some css elements might be broken! Please check the following website: #{$website}";
    }
}