@import 'variables.scss';

/* @include clearfix();*/
@mixin clearfix() {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

/* @include clear-ul();*/
@mixin clear-ul() {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* @include clear-btn();*/
@mixin clear-btn() {
    padding: 0;
    overflow: visible;
    color: inherit;
    font: inherit;
    line-height: inherit;
    background: none;
    border: 0;
    -webkit-appearance: none;
    user-select: none;

    &::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
}

@mixin media-mobile {
    @media (max-width: #{$media-tablet - 1}) {
        @content;
    }
}

/* media mixins - mobile first*/
@mixin media-tablet {
    @media (min-width: #{$media-tablet}) {
        @content;
    }
}

@mixin media-desktop-s {
    @media (min-width: #{$media-desktop-s}) {
        @content;
    }
}

@mixin media-desktop-m {
    @media (min-width: #{$media-desktop-m}) {
        @content;
    }
}

@mixin media-desktop-l {
    @media (min-width: #{$media-desktop-l}) {
        @content;
    }
}

@mixin media-desktop-xl {
    @media (min-width: #{$media-desktop-xl}) {
        @content;
    }
}

/*title mixins*/
@mixin title {
    color: #333F48;
    font-weight: 700;
    font-family: $font-secondary;
}

@mixin h1 {
    font-size: 30px;
    line-height: 38px;

    @include media-desktop-s {
        font-size: 36px;
        line-height: 44px;
    }
}

@mixin h2 {
    font-size: 24px;
    line-height: 32px;

    @include media-desktop-s {
        font-size: 30px;
        line-height: 38px;
    }
}

@mixin h3 {
    font-size: 18px;
    line-height: 26px;

    @include media-desktop-s {
        font-size: 24px;
        line-height: 32px;
    }
}

@mixin h4 {
    font-size: 14px;
    line-height: 22px;

    @include media-desktop-s {
        font-size: 18px;
        line-height: 26px;
    }
}


/**
 * @deprecated
 */
@mixin input {
    @include evo-input(normal, default);
}

/**
 * size: normal | small
 * theme: default | rounded
 */
@mixin evo-input($size: normal, $theme: default) {
    --evo-input-height: 48px;
    --evo-input-border-radius: 4px;
    --evo-input-font-size: 16px;

    @if ($size == small) {
        @if ($theme == default) {
            --evo-input-height: 32px;
        } @else if ($theme == rounded) {
            --evo-input-font-size: 14px;
            --evo-input-height: 40px;
        }
    }

    @if ($theme == rounded) {
        --evo-input-border-radius: 256px;
    }

    display: flex;
    align-items: center;
    height: var(--evo-input-height);
    color: $color-text;
    font-weight: normal;
    font-size: var(--evo-input-font-size);
    font-family: $font;
    white-space: nowrap;
    background-color: $color-white;
    border: 1px solid $color-disabled;
    border-radius: var(--evo-input-border-radius);
    outline: none;
    transition: color .3s, box-shadow .3s, background .3s, border .3s;
}

@mixin evo-input-focused {
    border: solid 1px $color-secondary-lighter;
}

@mixin evo-input-disabled {
    color: $color-text-subscription;
    background-color: $color-background-grey !important;
    cursor: default;
    pointer-events: none;
}

/**
 * @deprecated
 */
@mixin evo-input-valid {
}

@mixin evo-input-invalid {
    border-color: $color-error !important;
}

@mixin evo-control-states {
    $self: &;

    &_focused {
        @include evo-input-focused;
    }

    &_disabled {
        @include evo-input-disabled;
    }

    &_invalid {
        @include evo-input-invalid;
    }
}

@mixin hide-scroll {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */

    &::-webkit-scrollbar {
        display: none;
    }
}
