@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/styles/global/components/_reactCalendar.scss

@@ -1,237 +0,0 @@
-@use "../../utilities/functions" as u;
-
-.react-calendar {
-    width: 350px;
-    max-width: 100%;
-    background: white;
-    border: 1px solid #a0a096;
-    font-family: "Arial", "Helvetica", sans-serif;
-    line-height: 1.125em;
-}
-
-.react-calendar--doubleView {
-    width: 700px;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer {
-    display: flex;
-    margin: -0.5em;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer > * {
-    width: 50%;
-    margin: 0.5em;
-}
-
-.react-calendar,
-.react-calendar *,
-.react-calendar *:before,
-.react-calendar *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.react-calendar button {
-    margin: 0;
-    border: 0;
-    outline: none;
-}
-
-.react-calendar button:enabled:hover {
-    cursor: pointer;
-}
-
-.react-calendar__navigation {
-    display: flex;
-    height: 44px;
-    margin-bottom: 1em;
-}
-
-.react-calendar__navigation button {
-    min-width: 44px;
-    background: none;
-}
-
-.react-calendar__navigation button:disabled {
-    background-color: #f0f0f0;
-}
-
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-    background-color: #e6e6e6;
-}
-
-.react-calendar__month-view__weekdays {
-    text-align: center;
-    text-transform: uppercase;
-    font: inherit;
-    font-size: 0.75em;
-    font-weight: bold;
-}
-
-.react-calendar__month-view__weekdays__weekday {
-    padding: 0.5em;
-}
-
-.react-calendar__month-view__weekNumbers .react-calendar__tile {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font: inherit;
-    font-size: 0.75em;
-    font-weight: bold;
-}
-
-.react-calendar__month-view__days__day--weekend {
-    color: #d10000;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth,
-.react-calendar__decade-view__years__year--neighboringDecade,
-.react-calendar__century-view__decades__decade--neighboringCentury {
-    color: #757575;
-}
-
-.react-calendar__year-view .react-calendar__tile,
-.react-calendar__decade-view .react-calendar__tile,
-.react-calendar__century-view .react-calendar__tile {
-    padding: 2em 0.5em;
-}
-
-.react-calendar__tile {
-    max-width: 100%;
-    padding: 10px 6.6667px;
-    background: none;
-    text-align: center;
-    font: inherit;
-    font-size: 0.833em;
-}
-
-.react-calendar__tile:disabled {
-    background-color: #f0f0f0;
-    color: #ababab;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth:disabled,
-.react-calendar__decade-view__years__year--neighboringDecade:disabled,
-.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
-    color: #cdcdcd;
-}
-
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
-}
-
-.react-calendar__tile--now {
-    background: #ffff76;
-}
-
-.react-calendar__tile--now:enabled:hover,
-.react-calendar__tile--now:enabled:focus {
-    background: #ffffa9;
-}
-
-.react-calendar__tile--hasActive {
-    background: #76baff;
-}
-
-.react-calendar__tile--hasActive:enabled:hover,
-.react-calendar__tile--hasActive:enabled:focus {
-    background: #a9d4ff;
-}
-
-.react-calendar__tile--active {
-    background: #006edc;
-    color: white;
-}
-
-.react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--active:enabled:focus {
-    background: #1087ff;
-}
-
-.react-calendar--selectRange .react-calendar__tile--hover {
-    background-color: #e6e6e6;
-}
-.react-calendar {
-    border-color: #{u.color("gray400")};
-}
-.react-calendar button {
-    justify-content: center;
-}
-.react-calendar__month-view__days {
-    button {
-        &.react-calendar__tile {
-            height: 50px;
-            &:hover {
-                border-radius: 50%;
-            }
-            &--active {
-                border-radius: 50%;
-            }
-            &--now {
-                border-radius: 50%;
-            }
-        }
-    }
-}
-
-// .react-calendar__month-view__days__day--weekend {
-//     color: unset;
-// }
-.react-datetime-picker {
-    button {
-        color: unset;
-        &.react-calendar__tile {
-            &--active {
-                background-color: #{u.color("blue500")};
-                color: #{u.color("white")};
-                &:hover {
-                    background-color: #{u.color("blue500")};
-                }
-            }
-            &--now {
-                // background-color: unset;
-                border: 1px solid #{u.color("text")};
-                &:hover {
-                    background-color: #{u.color("gray100")};
-                }
-            }
-            &--hasActive {
-                background: #{u.color("blue500")};
-                &:hover {
-                    background: #{u.color("blue300")};
-                }
-            }
-        }
-        &:hover {
-            background-color: unset;
-        }
-    }
-    input {
-        /* Disable spinner/flipper buttons */
-        &[type="number"] {
-            -webkit-appearance: textfield;
-            -moz-appearance: textfield;
-            appearance: textfield;
-        }
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-        background-color: unset;
-        border: unset;
-        box-sizing: unset;
-        border-radius: unset;
-        &:focus,
-        &:focus-visible {
-            border: unset;
-            color: unset;
-            background: unset;
-            outline: none;
-        }
-    }
-}

package/src/styles/global/components/_reactDatePicker.css

@@ -1 +0,0 @@
-@layer craftsman-base{.react-date-picker__wrapper:focus,.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper,[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.react-datetime-picker__wrapper:disabled,.disabled.react-date-picker__wrapper,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after,.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}.react-date-picker,.react-datetime-picker{display:inline-flex;position:relative}.react-date-picker--disabled,.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{border:1px solid var(--gray400);border-radius:3px;flex-grow:1;flex-shrink:0;padding:2px;display:flex}.react-date-picker__inputGroup,.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider,.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero,.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input,.react-datetime-picker__inputGroup__input{color:currentColor;min-width:.54em;height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero,.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button,.react-datetime-picker__button{background:0 0;border:0;padding:4px 6px}.react-date-picker__button :enabled,.react-datetime-picker__button :enabled{cursor:pointer}.react-date-picker__button :enabled:hover .react-date-picker__button__icon,.react-date-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-date-picker__button :enabled:focus .react-date-picker__button__icon,.react-date-picker__button :enabled:focus .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-date-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-date-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-date-picker__button :disabled .react-date-picker__button__icon,.react-date-picker__button :disabled .react-datetime-picker__button__icon,.react-datetime-picker__button :disabled .react-date-picker__button__icon,.react-datetime-picker__button :disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-date-picker__button svg,.react-datetime-picker__button svg{display:inherit}.react-date-picker__calendar--closed,.react-date-picker__clock--closed,.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-datetime-picker__clock{background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}

package/src/styles/global/components/_reactDatePicker.scss

@@ -1,152 +0,0 @@
-@use "../components/input";
-@use "../../utilities/functions" as u;
-
-.react-date-picker,
-    .react-date-picker *,
-    .react-date-picker *:before,
-    .react-date-picker *:after,
-    .react-datetime-picker,
-    .react-datetime-picker *,
-    .react-datetime-picker *:before,
-    .react-datetime-picker *:after {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-    }
-
-    .react-date-picker,
-    .react-datetime-picker {
-        display: inline-flex;
-        position: relative;
-
-        &--disabled {
-            background-color: #f0f0f0;
-            color: #6d6d6d;
-        }
-        &__wrapper {
-            display: flex;
-            flex-grow: 1;
-            flex-shrink: 0;
-            border-radius: 3px;
-            padding: 2px;
-            border: 1px solid var(--gray400);
-        }
-        &__inputGroup {
-            // min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
-            flex-grow: 1;
-            padding: 0 2px;
-            box-sizing: content-box;
-        }
-        &__inputGroup__divider {
-            padding: 1px 0;
-            white-space: pre;
-        }
-        &__inputGroup__divider,
-        &__inputGroup__leadingZero {
-            display: inline-block;
-            font: inherit;
-        }
-        &__inputGroup__input {
-            min-width: 0.54em;
-            height: calc(100% - 2px);
-            position: relative;
-            padding: 1px;
-            border: 0;
-            background: none;
-            color: currentColor;
-            font: inherit;
-            box-sizing: content-box;
-            -webkit-appearance: textfield;
-            -moz-appearance: textfield;
-            appearance: textfield;
-        }
-        &__inputGroup__input::-webkit-outer-spin-button,
-        &__inputGroup__input::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            margin: 0;
-        }
-        &__inputGroup__input--hasLeadingZero {
-            margin-left: -0.54em;
-            padding-left: calc(1px + 0.54em);
-        }
-        &__button {
-            border: 0;
-            background: transparent;
-            padding: 4px 6px;
-            :enabled {
-                cursor: pointer;
-                &:hover, &:focus {
-                    .react-date-picker, .react-datetime-picker {
-                        &__button__icon {
-                            stroke: #0078d7;
-                        }
-                    }
-                }
-            }
-            :disabled {
-                .react-date-picker, .react-datetime-picker {
-                    &__button__icon {
-                        stroke: #6d6d6d;
-                    }
-                }
-            }
-            svg {
-                display: inherit;
-            }
-        }
-        &__calendar--closed, &__clock--closed {
-            display: none;
-        }
-
-    }
-
-    .react-date-picker__calendar {
-        width: 350px;
-        max-width: 100vw;
-        z-index: 1;
-    }
-    .react-datetime-picker__calendar,
-    .react-datetime-picker__clock {
-        z-index: 1;
-    }
-
-    .react-datetime-picker__inputGroup__input:invalid {
-        background: rgba(255, 0, 0, 0.1);
-    }
-
-    .react-datetime-picker__inputGroup__amPm {
-        font: inherit;
-        -webkit-appearance: menulist;
-        -moz-appearance: menulist;
-        appearance: menulist;
-    }
-        .react-datetime-picker__calendar {
-        width: 350px;
-        max-width: 100vw;
-    }
-
-    .react-datetime-picker__calendar .react-calendar {
-        border-width: thin;
-    }
-
-    .react-datetime-picker__clock {
-        width: 200px;
-        height: 200px;
-        max-width: 100vw;
-        padding: 25px;
-        background-color: white;
-        border: thin solid #a0a096;
-    }
-
-    .react-date-picker__calendar .react-calendar {
-        border-width: thin;
-    }
-    .react-date-picker__wrapper, .react-datetime-picker__wrapper {
-        // padding: 16px;
-        @extend %input-base;
-    }
-    .react-date-picker__inputGroup__input:invalid, .react-datetime-picker__inputGroup__input:invalid {
-        background: unset;
-    }

package/src/styles/global/components/_reactPhone.css

@@ -1 +0,0 @@
-@layer craftsman-base;.input-phone[data-label-position=inside] .input-label{top:15px;left:50px}.input-phone .react-international-phone-country-selector{position:relative}.input-phone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.input-phone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.input-phone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.input-phone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.input-phone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.input-phone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.input-phone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.input-phone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.input-phone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.input-phone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.input-phone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.input-phone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.input-phone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.input-phone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.input-phone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.input-phone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.input-phone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.input-phone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.input-phone .react-international-phone-input-container{display:flex}.input-phone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.input-phone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.input-phone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.input-phone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}

package/src/styles/global/components/_reactPhone.scss

@@ -1,265 +0,0 @@
-@use "./input";
-@use "../../utilities/functions" as u;
-
-.input-phone {
-    &[data-label-position="inside"] {
-        .input-label {
-            top: 15px;
-            left: 50px;
-        }
-    }
-
-    .react-international-phone-country-selector {
-        position: relative;
-    }
-
-    .react-international-phone-flag-emoji {
-        width: var(--react-international-phone-flag-width, 24px);
-        height: var(--react-international-phone-flag-height, 24px);
-        box-sizing: border-box;
-    }
-
-    .react-international-phone-country-selector-button {
-        display: flex;
-        height: var(--react-international-phone-height, 36px);
-        box-sizing: border-box;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
-        border: 1px solid
-            var(
-                --react-international-phone-country-selector-border-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        margin: 0;
-        appearance: button;
-        -webkit-appearance: button;
-        background-color: var(
-            --react-international-phone-country-selector-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        cursor: pointer;
-        text-transform: none;
-        user-select: none;
-
-        &:hover {
-            background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
-        }
-
-        &--hide-dropdown {
-            cursor: auto;
-
-            &:hover {
-                background-color: transparent;
-            }
-        }
-
-        &--disabled {
-            background-color: var(
-                --react-international-phone-disabled-country-selector-background-color,
-                var(--react-international-phone-disabled-background-color, whitesmoke)
-            );
-            cursor: auto;
-
-            &:hover {
-                background-color: var(
-                    --react-international-phone-disabled-country-selector-background-color,
-                    var(--react-international-phone-disabled-background-color, whitesmoke)
-                );
-            }
-        }
-
-        &__button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        &__flag-emoji {
-            margin: 0 4px;
-
-            &--disabled {
-                opacity: 0.75;
-            }
-        }
-
-        &__dropdown-arrow {
-            border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid
-                var(--react-international-phone-country-selector-arrow-color, #777);
-            border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-            border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
-            margin-right: 4px;
-            transition: all 0.1s ease-out;
-
-            &--active {
-                transform: rotateX(180deg);
-            }
-
-            &--disabled {
-                border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
-            }
-        }
-    }
-
-    .react-international-phone-country-selector-dropdown {
-        position: absolute;
-        z-index: 1000;
-        top: var(--react-international-phone-dropdown-top, 44px);
-        left: var(--react-international-phone-dropdown-left, 0);
-        display: flex;
-        width: 300px;
-        max-height: 200px;
-        flex-direction: column;
-        padding: 4px 0;
-        margin: 0;
-        background-color: var(
-            --react-international-phone-dropdown-item-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, 0.25));
-        color: var(
-            --react-international-phone-dropdown-item-text-color,
-            var(--react-international-phone-text-color, #222)
-        );
-        list-style: none;
-        overflow-y: scroll;
-
-        &__preferred-list-divider {
-            height: 1px;
-            border: none;
-            margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
-            background: var(
-                --react-international-phone-dropdown-preferred-list-divider-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        }
-
-        &__list-item {
-            display: flex;
-            min-height: var(--react-international-phone-dropdown-item-height, 28px);
-            box-sizing: border-box;
-            align-items: center;
-            padding: 2px 8px;
-
-            &:hover {
-                background-color: var(
-                    --react-international-phone-selected-dropdown-item-background-color,
-                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
-                );
-                cursor: pointer;
-            }
-
-            &--selected,
-            &--focused {
-                background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
-                color: var(
-                    --react-international-phone-selected-dropdown-item-text-color,
-                    var(--react-international-phone-text-color, #222)
-                );
-
-                .react-international-phone-country-selector-dropdown__list-item-dial-code {
-                    color: var(
-                        --react-international-phone-selected-dropdown-item-dial-code-color,
-                        var(--react-international-phone-dropdown-item-dial-code-color, gray)
-                    );
-                }
-            }
-
-            &--focused {
-                background-color: var(
-                    --react-international-phone-selected-dropdown-item-background-color,
-                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
-                );
-            }
-
-            &-flag-emoji {
-                margin-right: 8px;
-            }
-
-            &-country-name {
-                overflow: hidden;
-                margin-right: 8px;
-                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-
-            &-dial-code {
-                color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
-                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
-            }
-        }
-    }
-
-    .react-international-phone-dial-code-preview {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 8px;
-        border: 1px solid
-            var(
-                --react-international-phone-dial-code-preview-border-color,
-                var(--react-international-phone-border-color, gainsboro)
-            );
-        margin-right: -1px;
-        background-color: var(
-            --react-international-phone-dial-code-preview-background-color,
-            var(--react-international-phone-background-color, white)
-        );
-        color: var(
-            --react-international-phone-dial-code-preview-text-color,
-            var(--react-international-phone-text-color, #222)
-        );
-        font-size: var(
-            --react-international-phone-dial-code-preview-font-size,
-            var(--react-international-phone-font-size, 13px)
-        );
-
-        &--disabled {
-            background-color: var(
-                --react-international-phone-dial-code-preview-disabled-background-color,
-                var(--react-international-phone-disabled-background-color, whitesmoke)
-            );
-            color: var(
-                --react-international-phone-dial-code-preview-disabled-text-color,
-                var(--react-international-phone-disabled-text-color, #666)
-            );
-        }
-    }
-
-    .react-international-phone-input-container {
-        display: flex;
-
-        .react-international-phone-country-selector-button {
-            border-radius: var(--react-international-phone-border-radius, 4px);
-            margin-right: -1px;
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        .react-international-phone-input {
-            overflow: visible;
-            height: var(--react-international-phone-height, 36px);
-            box-sizing: border-box;
-            padding: 0 8px;
-            border: 1px solid var(--react-international-phone-border-color, gainsboro);
-            border-radius: var(--react-international-phone-border-radius, 4px);
-            margin: 0;
-            background-color: var(--react-international-phone-background-color, white);
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            color: var(--react-international-phone-text-color, #222);
-            font-family: inherit;
-            font-size: var(--react-international-phone-font-size, 13px);
-
-            &:focus {
-                outline: none;
-            }
-
-            &--disabled {
-                background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
-                color: var(--react-international-phone-disabled-text-color, #666);
-            }
-        }
-    }
-}