@use "sass:math"

@mixin pallete-style($style, $interaction)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            background-color: $background
            color: $color
            border: get-border($border-color)

            @if $interaction == true
                &:focus
                    background-color: darken($background, 5%)
                &:hover
                    background-color: darken($background, 10%)
                &:active
                    background-color: darken($background, 15%)

@mixin modal-bg($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            background-color: transparentize($background, 0.4)

@mixin spinner-style($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            div[class$="-dot"]:before,
            div[class$="-rect"]:before,
            div[class$="-cube"]:before,
            .sk-grid-cube,
            .sk-wander-cube,
            .sk-wave-rect,
            .sk-swing-dot,
            .sk-bounce-dot,
            .sk-flow-dot
                background: $background

@mixin arrow-style($style, $interaction, $element-position)
  @each $name, $background, $color, $border-color in $style
    &.#{$name}
      &.#{$element-position}::after
        content: " "
        position: absolute
        border-style: solid
        border-width: 5px
        @if $element-position == "left"
          border-color: transparent transparent transparent $background

        @if $element-position == "right"
          border-color: transparent $background transparent transparent

        @if $element-position == "below"
          border-color: transparent transparent $background transparent

        @if $element-position == "above"
          border-color: $background transparent transparent transparent

@mixin spinner-plane-style($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            background: $background

@mixin layout-screen($screen)
    @for $size from 1 through 12
        @if $screen == s
            @media (min-width: 576px)
                @include get-layout($screen, $size)
        @else if $screen == m
            @media (min-width: 768px)
                @include get-layout($screen, $size)
        @else if $screen == l
            @media (min-width: 992px)
                @include get-layout($screen, $size)
        @else if $screen == xl
            @media (min-width: 1200px)
                @include get-layout($screen, $size)
        @else
            @include get-layout($screen, $size)


@mixin get-layout($screen, $size)
    &.it-#{$screen}-#{$size}
        flex-basis: math.div(100%, math.div(12, $size))

@mixin dropdown-style($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            background-color: $background
            color: $color
            border: get-border($border-color)

            .dropdown-item
                &:focus
                    background-color: darken($background, 5%)
                &:hover
                    background-color: darken($background, 10%)
                &:active, &.active
                    background-color: darken($background, 15%)

@mixin carousel-dot-style($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            svg
                fill: $background

            &:focus
                svg
                    fill: darken($background, 5%)
            &:hover
                svg
                    fill: darken($background, 10%)
            &:active, &.active
                svg
                    fill: darken($background, 15%)

@mixin navbar-style($style)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            background-color: $background
            color: $color
            border: get-border($border-color)

            .navbar-menu
                fill: $color
                width: 40px

            .navbar-item
                padding: 10px
                cursor: default

            ul
                background-color: $background

            .navbar-item.interaction, .navbar-dropdown, .navbar-dropdown-item
                    cursor: pointer
                    &:focus
                        background-color: darken($background, 5%)
                    &:hover
                        background-color: darken($background, 10%)
                    &:active, &.active
                        background-color: darken($background, 15%)

@mixin get-branch($size)
    .branch
        align-self: center
        margin-left: 5px
        img
            width: $size

@function get-border($border-color)
    $border: none
    @if $border-color != none
        $border: 1px solid $border-color

    @return $border

@mixin form-style($style, $underline)
    @each $name, $background, $color, $border-color in $style
        &.#{$name}
            @if $underline
                border-radius: 2px
                border-top: 0
                border-left: 0
                border-right: 0
                border-bottom: 2px solid $border-color
            @else
                border: 1px solid $border-color

            @include placeholder
                color: $color

            &:focus
                border-color: darken($border-color, 10%)
            &:hover
                border-color: darken($border-color, 20%)
            &:active
                border-color: darken($border-color, 30%)

@mixin placeholder
  &::-webkit-input-placeholder
    @content
  &:-moz-placeholder
    @content
  &::-moz-placeholder
    @content
  &:-ms-input-placeholder
    @content