@import "@vuepic/vue-datepicker/dist/main.css";

.dp__menu {
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

.dp__input {
    padding: 0.75rem 1rem;
    border: 1px solid $border-color;
    border-radius: 12px;
    padding: map-get($spacer, 2) map-get($spacer, 3) map-get($spacer, 2) #{calc(
            map-get($spacer, 4) * 1.2
        )};

    &::placeholder {
        opacity: 1 !important;
    }
}

.dp__action_row {
    flex-direction: column;

    .dp__selection_preview {
        width: auto;
        font-size: 0.9rem;
    }

    .dp__action_buttons {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: map-get($spacer, 2);

        .dp__action {
            padding: map-get($spacer, 1) map-get($spacer, 3);
            font-size: 1rem;
            color: white;
            font-weight: 800;
            border-width: 2px;
            border-style: solid;
            border-radius: 24px;
            transition: background-color 0.1s, color 0.1s;
            cursor: pointer;
            background-color: $secondary-color;
            border-color: $secondary-color;

            &:hover {
                background-color: #fff;
                text-decoration: none;
                color: $secondary-color;
            }

            &.dp__select {
                background-color: $primary-color;
                border-color: $primary-color;

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

.dp__theme_light {
    --dp-success-color: #{$primary-color};
}