///////////////////////
// COMPONENTS
////
// Buttons and other reusable, independent content 
// 

/************/
/** BUTTON **/
/************/
.btn-holder
    display: flex

@mixin btn-color($bg-color, $text-color, $bg-hover-color, $text-hover-color, $has-border)
    background-color: $bg-color
    color: $text-color
    @if $has-border == true 
        border-color: $text-color
    .btn__icon svg path 
        fill: $text-color
    &:hover
        background-color: $bg-hover-color
        color: $text-hover-color
        @if $has-border == true 
            border-color: $text-hover-color
        .btn__icon svg path 
            fill: $text-hover-color

.btn 
    display: flex
    align-items: center
    margin-top: 32px
    margin-bottom: 32px
    // border-width: 1px
    // border-style: solid
    text-align: center
    text-decoration: none
    border-radius: 20px
    &, .btn__icon svg path 
        transition: all .2s
    &--big
        padding: 15px 30px
        @include get-text(large)
    &--small
        padding: 10px 15px
        @include get-text(regular)
    &--color 
        @include btn-color(#000, #fff, #fff, #000, false)
    &--color2
        @include btn-color(#000, #fff, #fff, #000, false)
    
    &--with-icon#{&}--big
        .btn__icon 
            margin-left: 15px
            margin-right: 15px
            display: flex
    &--with-icon#{&}--small
        .btn__icon 
            margin-left: 15px
            margin-right: 15px
            display: flex
    // &--with-icon .btn__icon svg
    //     width: 10px
    //     height: 10px




@mixin components-btn--desktop-and-smaller
    .btn--big
        @include get-text(regular)
        margin-top: 16px
        margin-bottom: 16px
    .btn--small
        @include get-text(small)
        margin-top: 16px
        margin-bottom: 16px
@mixin components-btn--tablet-and-smaller
    .btn--big
        @include get-text(small)
    .btn--small
        @include get-text(x-small)


/***********/
/** MODAL **/
/***********/
body.no-scroll
    overflow: hidden

.modal
    position: absolute
    top: 50px
    left: 50vw
    transform: translateX(-50%)
    min-height: auto
    box-shadow: 0 19px 38px rgba(#000, 12%), 0 15px 12px rgba(#000, 22%)
    background-color: #fff
    &__backdrop
        background: rgba(#000, 0.3)
        position: fixed
        overflow-y: auto
        top: 0
        right: 0
        bottom: 0
        left: 0
        display: none
        transition: opacity 1s
        z-index: 10
        opacity: 0
        &[data-is-opened='false']
            opacity: 0
            // animation: closeModal 0.3s ease-in-out forwards
        &[data-is-opened='true']
            opacity: 1
            // animation: openModal 0.3s ease-in-out forwards
        &.open
            display: block

    &__close
        position: absolute
        top: 0px
        svg 
            width: 20px
            height: 20px
            margin-right: 12px
            line
                fill: none
                // stroke: $light
                stroke-miterlimit: 10
                stroke-width: 4px
        &:hover 
    &.slide-in