.Hylia-a-date-picker {
    position: relative;
    display: block;
    
    & > div {
        width: 100%;
    }


    &:before {
        width: 3.5rem;
        height: 3.5rem;
    }

    &__date {
        color: @vader;
        height: 3.5rem;
        font-size: 1.4rem;
        font-family: @regular_regular;
        border: 0.1rem solid @minion;
        border-radius: @radius;
        padding: 1rem;
        width: 100%;
    }

    &__icon {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        color: @smart;
    }
}

// Override React Date Picker
.react-datepicker {
    font-family: @regular_regular;
    font-size: 1.1rem;
    border: 0.1rem solid @minion;
    border-radius: 0;

    &-popper {
        width: 100%;
        z-index: 2;
    }

    &-popper[data-placement^="bottom"] {
        margin-top: 0;
    }

    &-popper[data-placement^="top"] {
        margin-bottom: 0;
    }

    &-wrapper {
        display: block;
    }

    &__triangle {
        display: none;
    }

    &__header {
        background-color: @minion;
        border-radius: 0;
    }

    &__current-month {
        font-family: @condensed_regular;
        font-size: 1.3rem;
    }

    &__input-container {
        display: block;
    }

    &__day--selected {
        background-color: @terran;

        &:hover {
            background-color: @terran;
        }
    }


}