<commit_before>.datepicker {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 280px;

    &__input {
        border-radius: $BORDER_RADIUS;

        input {
            text-align: center;
            pointer-events: auto;

            &:focus, &:hover {
                outline: none;
                border-color: $COLOR_DARK_BLUE_5;
            }
        }
    }
    &__icon {
        opacity: 1;
        transition: opacity 0.1s;

        &:hover {
            cursor: pointer;
        }
        &--is-hidden {
            opacity: 0;
        }
        &--with-label {
            top: 32px !important;
        }
    }
    // TODO: update datepicker UI in mobile
    &__native-overlay {
        background: $COLOR_WHITE;
        height: 32px;
        cursor: pointer;
        border: 1px solid $COLOR_LIGHT_BLACK_4;
        border-radius: $BORDER_RADIUS;
        font-size: 14px;
        box-sizing: border-box;
        font-weight: 300;
        transition: border 0.25s;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
        background-clip: padding-box;
        text-align: left;

        &__arrowhead {
            display: block;
            position: absolute;
            top: 8px;
            right: 6px;
        }
    }
    // TODO: style native date picker
    input[type=date] {
        appearance: none;
        // sometimes we have 2 different elements with hover and focus in chrome mobile
        &:hover:not(:focus) {
            border-color: $COLOR_LIGHT_BLACK_4;
        }
        &::-webkit-date-and-time-value {
            margin: 0;
        }
    }
    &__picker {
        position: absolute;
        top: 7px;
        z-index: 999;
        transform-origin: left;
        transform: scale(1, 0) translate3d(20px, 0, 0);
        transition: transform 0.25s ease, opacity 0.25s linear;

        &--left {
            &.datepicker__picker--enter, &.datepicker__picker--exit {
                transform: scale(1, 1) translate3d(-275px, 0, 0);
                opacity: 0;
            }
            &.datepicker__picker--enter-done {
                transform: translate3d(-295px, 0, 0);
                opacity: 1;
            }
        }
    }
}

// Dark Theme
.theme--dark {
    .datepicker {
        &__input {<commit_msg>alter z index of datepicker to show the tooltip contract<commit_after>.datepicker {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 280px;

    &__input {
        border-radius: $BORDER_RADIUS;

        input {
            text-align: center;
            pointer-events: auto;

            &:focus, &:hover {
                outline: none;
                border-color: $COLOR_DARK_BLUE_5;
            }
        }
    }
    &__icon {
        opacity: 1;
        transition: opacity 0.1s;

        &:hover {
            cursor: pointer;
        }
        &--is-hidden {
            opacity: 0;
        }
        &--with-label {
            top: 32px !important;
        }
    }
    // TODO: update datepicker UI in mobile
    &__native-overlay {
        background: $COLOR_WHITE;
        height: 32px;
        cursor: pointer;
        border: 1px solid $COLOR_LIGHT_BLACK_4;
        border-radius: $BORDER_RADIUS;
        font-size: 14px;
        box-sizing: border-box;
        font-weight: 300;
        transition: border 0.25s;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
        background-clip: padding-box;
        text-align: left;

        &__arrowhead {
            display: block;
            position: absolute;
            top: 8px;
            right: 6px;
        }
    }
    // TODO: style native date picker
    input[type=date] {
        appearance: none;
        // sometimes we have 2 different elements with hover and focus in chrome mobile
        &:hover:not(:focus) {
            border-color: $COLOR_LIGHT_BLACK_4;
        }
        &::-webkit-date-and-time-value {
            margin: 0;
        }
    }
    &__picker {
        position: absolute;
        top: 7px;
        z-index: 1;
        transform-origin: left;
        transform: scale(1, 0) translate3d(20px, 0, 0);
        transition: transform 0.25s ease, opacity 0.25s linear;

        &--left {
            &.datepicker__picker--enter, &.datepicker__picker--exit {
                transform: scale(1, 1) translate3d(-275px, 0, 0);
                opacity: 0;
            }
            &.datepicker__picker--enter-done {
                transform: translate3d(-295px, 0, 0);
                opacity: 1;
            }
        }
    }
}

// Dark Theme
.theme--dark {
    .datepicker {
        &__input {
{'fraction_non_alphanumeric': 0.10852073447493295, 'fraction_numerical': 0.028471219310913967, 'mean_word_length': 1.3834808259587021, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7481381', 'n_tokens_mistral': 1578, 'n_tokens_neox': 1431, 'n_words': 341}