.dp__main {
    font-family: $dp__font_family;
    user-select: none;
    box-sizing: border-box;
}

.dp__pointer {
    cursor: pointer;
}

// Allow control of color property on icons
   .dp__icon {
       stroke: currentcolor;
       fill: currentcolor;
   }

// Div style that is displayed on the bottom of the menu for switching layouts
   .dp__button {
       width: 100%;
       text-align: center;
       color: var(--dp-icon-color);
       background: var(--dp-background-color);
       cursor: pointer;
       display: flex;
       align-items: center;
       align-content: center;
       justify-content: center;
       padding: $dp__common_padding;
       box-sizing: border-box;
       height: $dp__button_height;

&:hover {
     background: var(--dp-hover-color);
     color: var(--dp-hover-icon-color);
 }

svg {
    height: $dp__button_icon_height;
    width: auto;
}
}

.dp__button_bottom {
    border-bottom-left-radius: $dp__border_radius;
    border-bottom-right-radius: $dp__border_radius;
}

.dp__flex_display {
    display: flex;
}

.dp__flex_display_with_input {
    flex-direction: column;
    align-items: start;
}

.dp__relative {
    position: relative;
}

.calendar-next-enter-active,
.calendar-next-leave-active,
.calendar-prev-enter-active,
.calendar-prev-leave-active, {
    transition: all $dp__transition_duration ease-out;
}

.calendar-next-enter-from {
    opacity: 0;
    transform: translateX($dp__transition_length);
}

.calendar-next-leave-to {
    opacity: 0;
    transform: translateX(-$dp__transition_length);
}

.calendar-prev-enter-from {
    opacity: 0;
    transform: translateX(-$dp__transition_length);
}

.calendar-prev-leave-to {
    opacity: 0;
    transform: translateX($dp__transition_length);
}

.dp-menu-appear-enter-active,
.dp-menu-appear-leave-active,
.dp-slide-up-enter-active,
.dp-slide-up-leave-active,
.dp-slide-down-enter-active,
.dp-slide-down-leave-active {
    transition: all 0.1s ease-out;
}

.dp-slide-down-leave-to,
.dp-slide-up-enter-from {
    opacity: 0;
    transform: translateY($dp__transition_length);
}

.dp-slide-down-enter-from,
.dp-slide-up-leave-to {
    opacity: 0;
    transform: translateY(-$dp__transition_length);
}

.dp-menu-appear-enter-from {
    opacity: 0;
}

.dp-menu-appear-leave-to {
    opacity: 1;
}