input,
textarea,
select,
button,
button[type='submit'] {
    border: 0;
    -webkit-appearance: none;
}

input,
textarea,
select {
    outline: 0;
    color: inherit;
    background-color: transparent;
}

/**
 * Variables
 */
$color-primary: rgb(45, 51, 61) !default;
$color-grey1: rgb(22, 22, 22) !default;
$color-grey2: rgb(150, 150, 150) !default;
$color-red: rgb(255, 0, 0) !default;
$color-white1: rgb(255, 255, 255) !default;
$color-white2: rgb(222, 222, 222) !default;

@mixin use-breakpoint($name) {
    $breakpoints: (
        desktop: 1280px,
        tablet: 1024px,
        mini-tablet: 768px,
        phablet: 320px,
    );

    @if map-has-key($breakpoints, $name) {
        @media (min-width: map-get($breakpoints, $name)) {
            @content;
        }
    }
}

/**
 * Mixins
 */
@mixin cmp-base($component, $host: block) {
    :host {
        display: $host;
    }

    .#{$component} {
        @content;
    }
}

@mixin cmp-form-element() {
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;

    &--disabled,
    &--disabled &__input {
        user-select: none;
        cursor: not-allowed;
    }

    &--disabled &__input {
        color: $color-grey2;
    }

    &--invalid &__input {
        color: $color-red;
    }

    &--no-margin {
        margin-top: 0;
    }
}

@mixin cmp-form-label() {
    &__label {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: $color-primary;
        font-size: 16px;
        opacity: 0.5;
        transition: all 0.2s;
        pointer-events: none;
    }

    &--filled &__label,
    &--focus &__label {
        height: 15px;
        line-height: 15px;
        top: -15px;
        font-size: 12px;
    }

    &--disabled &__label,
    &--disabled &__icon {
        user-select: none;
        color: $color-grey2;
        cursor: not-allowed;
    }

    &--invalid &__label {
        color: $color-red;
    }
}

@mixin cmp-form-line() {
    &__line {
        &::before,
        &::after {
            height: 4px;
            position: absolute;
            bottom: -4px;
            left: 0;
            display: block;
            opacity: 0.2;
            transition: width 0.2s, opacity 0.2s, background 0.2s;
            content: ' ';
        }

        &::before {
            width: 100%;
            background: rgba($color-grey1, 0.8);
        }

        &::after {
            width: 0;
            background: $color-primary;
        }
    }

    &--focus:not(&--disabled) &__line::after,
    &:not(&--disabled):focus-within &__line::after {
        opacity: 1;
        width: 100%;
    }

    &--disabled &__line::before,
    &--disabled &__line::after {
        background: rgba($color-grey1, 0.4);
    }

    &--invalid &__line::before,
    &--invalid &__line::after {
        background: $color-red;
    }
}

@mixin cmp-form-input() {
    @include cmp-form-label();
    @include cmp-form-line();

    &__control {
        height: 35px;
        line-height: 35px;
        margin-top: 20px;
        position: relative;
        z-index: 997;
    }

    &__input {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        transition: color 0.2s;
    }
}

@mixin cmp-form-text-area() {
    @include cmp-form-label();
    @include cmp-form-line();

    &__control {
        min-height: 35px;
        line-height: 35px;
        margin-top: 20px;
        position: relative;
        transition: min-height 0.2s;
    }

    &__input {
        width: 100%;
        height: 22px;
        line-height: 22px;
        padding: 5px 0 0 0;
        resize: none;
        transition: height 0.2s;
    }

    &--filled &__control,
    &--focus &__control {
        min-height: 150px;
    }

    &--filled &__input,
    &--focus &__input {
        height: 150px;
    }
}


@include cmp-base(cmp-f-button) {
    @include cmp-form-element();
    height: 40px;
    padding: 10px 20px;
    cursor: pointer;

    &__icon {
        margin-right: 10px;
    }

    &--primary {
        background: rgba($color-primary, 0.6);
        color: $color-white1;
        transition: background 0.2s;

        &:hover {
            background: $color-primary;
        }
    }

    &--secondary {
        background: $color-white2;
        color: $color-primary;
    }

    &--disabled,
    &--disabled &__wrapper,
    &--disabled &__text {
        user-select: none;
        cursor: not-allowed;
    }

    &--disabled:not(&--secondary) {
        background: rgba($color-primary, 0.4);

        &:hover {
            background: rgba($color-primary, 0.4);
        }
    }

    &--disabled &__wrapper {
        opacity: 0.6;
    }

    &--small {
        min-width: 100px;
        height: 28px;
        line-height: 21px;
        padding: 4px 20px;
    }
}

@include cmp-base(cmp-f-checkbox, block) {
    @include cmp-form-element();

    &__control {
        min-height: 35px;
        line-height: 28px;
        margin-top: 20px;
        position: relative;
    }

    &__input {
        display: none;
    }

    &__symbol {
        width: 35px;
        height: 35px;
        position: absolute;
        background-color: transparent;
        border: 3px $color-primary solid;
        opacity: 0.5;
        transition: border-color 0.4s, background-color 0.4s, opacity 0.4s;
    }

    &__check {
        stroke-dasharray: 130px 130px;
        stroke-dashoffset: 130px;
        transition: stroke-dashoffset 1s;
        transition-delay: 0.2s;
    }

    &__label {
        position: relative;
        padding-top: 4px;
        padding-left: 50px;
        display: block;
        color: $color-primary;
        opacity: 0.5;
        transition: color 0.3s;
    }

    &--filled &__symbol {
        opacity: 1;
        background-color: $color-primary;
    }

    &--filled &__check {
        stroke-dashoffset: 0;
    }

    &--disabled &__label {
        color: $color-grey2;
        cursor: not-allowed;
    }

    &--invalid &__symbol {
        border-color: $color-red;
        // opacity: 0.4;
    }

    &--invalid &__label {
        color: $color-red;
    }
}

@include cmp-base(cmp-f-column, block) {
    &--flex {
        display: flex;
    }

    &--align-left {
        justify-content: flex-start;

        & > *:not(:last-child) {
            margin-right: 20px;
        }
    }

    &--align-right {
        justify-content: flex-end;

        & > *:not(:first-child) {
            margin-left: 20px;
        }
    }
}

@include cmp-base(cmp-f-date, block) {
    @include cmp-form-element();
    @include cmp-form-input();
}

.flatpickr {
    &-calendar {
        &.arrowTop {
            margin-top: 15px;
        }

        &.arrowBottom {
            margin-top: -35px;
        }
    }

    &-months,
    &-months &-month,
    &-months &-prev-month,
    &-months &-next-month,
    &-current-month {
        height: 40px;
    }

    &-months &-prev-month,
    &-months &-next-month {
        line-height: 30px;

        svg {
            fill: $color-primary;
            opacity: 0.6;
            transition: opacity 0.3s;
        }

        &:hover svg {
            fill: $color-primary;
            opacity: 1;
        }
    }

    &-current-month {
        padding-top: 9px;
    }

    &-weekwrapper &-weekday,
    &-rContainer &-weekdays {
        height: 40px;
        line-height: 40px;
    }

    &-day {
        margin-bottom: 5px;
        padding-right: 1px;
        line-height: 38px;

        &.selected,
        &.selected:hover {
            padding-left: 0px;
            background-color: $color-primary;
            border-color: $color-primary;
        }
    }
}

@include cmp-base(cmp-f-time, block) {
    @include cmp-form-element();
    @include cmp-form-input();
}

@include cmp-base(cmp-f-email, block) {
    @include cmp-form-element();
    @include cmp-form-input();

    &__suggestions {
        width: 100%;
        max-height: 270px;
        margin-top: 4px;
        border: 1px solid rgba($color-grey2, 0.2);
        background-color: $color-white1;
        overflow-y: scroll;
        z-index: 998;
    }

    &__suggestion-close {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 38px;
        fill: $color-primary;
        text-align: center;
        z-index: 999;
        cursor: pointer;
    }

    &__suggestion-list {
        width: 100%;
        height: 100%;
        color: $color-primary;
    }

    &__suggestion-item {
        width: 100%;
        padding: 3px 10px;
        line-height: 35px;
        position: relative;
        pointer-events: all;
        user-select: none;
        z-index: 998;
        cursor: pointer;

        &:nth-child(even) {
            background-color: rgba($color-white2, 0.2);
        }

        &:hover {
            background-color: rgba($color-grey2, 0.2);
        }
    }

    &__input:focus ~ &__suggestions {
        display: block;
    }
}

@include cmp-base(cmp-f-error, block) {
    @include cmp-form-element();
    margin-top: 10px;
    margin-bottom: 5px;
    color: $color-red;
    opacity: 0.5;

    &__icon,
    &__message {
        display: inline-block;
    }

    &__icon {
        margin-right: 5px;
    }
}

@include cmp-base(cmp-f-explanation, block) {
    @include cmp-form-element();

    &__icon,
    &__message {
        display: inline-block;
    }

    &__icon {
        margin-right: 5px;
    }
}

@include cmp-base(cmp-f-input, block) {
    @include cmp-form-element();
    @include cmp-form-input();
}

@include cmp-base(cmp-f-password, block) {
    @include cmp-form-element();
    @include cmp-form-input();

    &__toggle {
        height: 100%;
        position: absolute;
        top: 2px;
        right: 10px;
        color: $color-primary;
        opacity: 0.5;
        transition: opacity 0.2s, color 0.2s;
    }

    &--visible &__input {
        color: rgba($color-grey1, 0.8);
    }

    &--visible &__toggle {
        opacity: 1;
    }

    &--disabled &__toggle {
        color: $color-grey2;
    }
}

@include cmp-base(cmp-f-phone, block) {
    @include cmp-form-element();
    @include cmp-form-input();
}

@include cmp-base(cmp-f-radiobutton, block) {
    @include cmp-form-element();
    @include cmp-form-label();

    &__label {
        margin-bottom: 10px;
        position: relative;
        display: block;
        pointer-events: initial;
    }

    &__control {
        height: 35px;
        line-height: 35px;
        position: relative;
        display: flex;

        &:not(:first-of-type) {
            margin-top: 15px;
        }
    }

    &__input {
        display: none;
    }

    &__symbol {
        width: 35px;
        height: 35px;
        background-color: transparent;
        border: 3px $color-primary solid;
        border-radius: 100%;
        opacity: 0.5;
        transition: background-color 0.4s, opacity 0.4s;
    }

    &__circle {
        r: 0;
        transition: r 0.2s;
        transition-delay: 0.1s;
    }

    &__control-label {
        margin-left: 10px;
        opacity: 0.5;
        font-size: 16px;
        color: $color-primary;
    }

    &__input:checked + &__symbol {
        opacity: 1;
        background-color: $color-primary;
    }

    &__input:checked ~ &__symbol > &__circle {
        r: 9;
    }

    &--inline &__controls {
        display: flex;
    }

    &--inline &__control {
        margin-top: 0;

        &:not(:last-of-type) {
            margin-right: 20px;
        }
    }

    &--disabled &__control-label {
        color: $color-grey2;
        user-select: none;
        cursor: not-allowed;
    }

    &--disabled &__symbol {
        border-color: $color-white2;
        opacity: 1;
    }

    &--disabled &__input:checked + &__symbol {
        border-color: $color-white2;
        background-color: $color-white2;
    }

    &--invalid &__control-label {
        color: $color-red;
    }
}

@include cmp-base(cmp-f-row, block) {
    display: flex;
    flex-direction: column;

    &--layout-1 > *,
    &--layout-1-1 > *,
    &--layout-1-2 > *,
    &--layout-2-1 > *,
    &--layout-1-1-1 > * {
        display: block;
        width: 100%;
    }

    @include use-breakpoint(mini-tablet) {
        flex-direction: row;

        &--layout-1-1 > * {
            width: calc(50% - 10px);

            &:first-child {
                margin-right: 20px;
            }
        }

        &--layout-1-2 > * {
            &:first-child {
                width: calc((100% / 3) - 10px);
                margin-right: 20px;
            }

            &:last-child {
                width: calc((100% / 3 * 2) - 10px);
            }
        }

        &--layout-2-1 > * {
            &:first-child {
                width: calc((100% / 3 * 2) - 10px);
                margin-right: 20px;
            }

            &:last-child {
                width: calc((100% / 3) - 10px);
            }
        }

        &--layout-1-1-1 > * {
            width: calc((100% / 3) - (40px / 3));

            &:nth-child(n):not(:last-child) {
                margin-right: 20px;
            }
        }
    }
}

@include cmp-base(cmp-f-select, block) {
    @include cmp-form-element();
    @include cmp-form-input();

    &__control {
        z-index: 998;
    }

    &__icon {
        width: 35px;
        height: 35px;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 38px;
        text-align: center;
        color: rgba($color-grey1, 0.8);
        opacity: 0.4;
        cursor: pointer;
    }

    &__placeholder {
        color: rgba($color-grey1, 0.8);
    }

    .choices {
        margin-bottom: 0;
        font-size: inherit;

        &::after {
            display: none;
            content: '';
        }
    }

    .choices[data-type*='select-one'] .choices__inner {
        max-height: 35px;
        min-height: 0;
        margin: 0;
        padding: 0;
        background-color: inherit;
        border: 0;
        border-radius: 0;
        font-size: inherit;
    }

    .choices[data-type*='select-one'] .choices__list {
        padding: 0;
        overflow: hidden;

        &--dropdown {
            margin-top: 4px;
            border-top: 0;
            border-color: rgba($color-grey2, 0.2);
            border-radius: 0;
            overflow: visible;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &--dropdown .choices__list {
            max-height: 270px;
            margin-top: 5px;
            overflow: scroll;
        }

        &--dropdown .choices__item {
            padding: 3px 10px;

            &:nth-child(even) {
                background-color: rgba($color-white2, 0.2);
            }
        }

        &--dropdown .choices__item.is-highlighted {
            background-color: rgba($color-grey2, 0.2);
        }
    }

    .choices[data-type*='select-one'] .choices__input {
        margin-top: -43px;
        padding: 10px 0;
        border: 0;
        opacity: 0;
        font-size: inherit;
        transition: opacity 0.2s;
    }

    .choices[data-type*='select-one'].is-open ~ &__icon {
        transform: rotate(180deg);
    }

    .choices[data-type*='select-one'].is-open .choices__list,
    .choices[data-type*='select-one'].is-open .choices__input {
        opacity: 1;
    }
}

@include cmp-base(cmp-f-text-area, block) {
    @include cmp-form-element();
    @include cmp-form-text-area();
}