/**
 * Extends
 *
 * Re-usable styles, intended to be used in scss, not directly in the dom.
 * Utilizes Breakpoints
 *
 * Boxes
 * Typography
 *
 *
 */

/* -------------------- Boxes -------------------- */
@use 'mixins';
@use 'variables';

.cb-box {
    background: var(--commonsbooking-color-gray-background);

    overflow: hidden;
    border-radius: var(--commonsbooking-radius);
    margin-bottom: var(--commonsbooking-spacer);

    padding: var(--commonsbooking-spacer-small) / 2 var(--commonsbooking-spacer-small);
    @include mixins.breakpoint(phablet) {
        padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big);
    }
}

.cb-box-inner {
    background: variables.$color-white;

    border-radius: var(--commonsbooking-radius);

    padding: var(--commonsbooking-spacer-small);
    @include mixins.breakpoint(phablet) {
        padding: var(--commonsbooking-spacer);
    }
}

/* -------------------- Typography -------------------- */

.cb-big {
    font-size: var(--commonsbooking-font-size-big);
    font-weight: bold;
}

/* -------------------- Boxes -------------------- */

.shadow {
    box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.22);
}

.shadow-small {
    box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
}

.cb-hover {
    @extend .shadow-small;
    border: 1px solid variables.$color-blue-dark;
    border-radius: var(--commonsbooking-radius);
}

.cb-thumbnail {
    border-radius: var(--commonsbooking-radius);
}

/* -------------------- Buttons -------------------- */

.cb-button {
    border-radius: var(--commonsbooking-radius);
    font-size: var(--commonsbooking-font-size-normal);
    line-height: var(--commonsbooking-font-size-normal);
    background-color: var(--commonsbooking-color-buttons);
    border: none !important; /* TwentyFifteen theme fix */
    text-decoration: none !important;
    word-break: normal !important; /* TwentyTwenty theme fix */
    white-space: nowrap;
    color: variables.$color-white;
    padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big);
    font-weight: bold;

    &.small {
        padding: var(--commonsbooking-spacer);
        font-size: var(--commonsbooking-font-size-small);
    }

    &:hover {
        @extend .shadow-small;
        background: var(--commonsbooking-color-secondary);
        color: variables.$color-white; /* Various themes fix */
    }

    &:visited {
        color: variables.$color-white;
    }

    &.big {
        padding: var(--commonsbooking-spacer) var(--commonsbooking-spacer-big);
        font-size: var(--commonsbooking-font-size-big);
        line-height: var(--commonsbooking-font-size-big);
    }
    &.secondary {
        background-color: variables.$color-white;
        color: var(--commonsbooking-color-error);
    }

    &.cancel {
        background-color: var(--commonsbooking-color-error);
    }

    &.confirm {
        background-color: var(--commonsbooking-color-success);
    }

    &.delete {
        background-color: var(--commonsbooking-color-error);
    }

    &[disabled='disabled'] {
        background-color: var(--commonsbooking-color-greyedout);
        color: var(--commonsbooking-textcolor-light);
        @extend .shadow-small;
    }

    &.no-right-radius {
        border-radius: var(--commonsbooking-radius) 0;
    }
    &.no-left-radius {
        border-radius: 0 var(--commonsbooking-radius);
    }
}

.cb-button-container a {
    @extend .cb-button;
}
.cb-pill {
    border-radius: var(--commonsbooking-radius-pill);
    padding: 0;
    margin: 0;
    a {
        text-decoration: none;
        color: variables.$color-white;
        padding: var(--commonsbooking-spacer-small) var(--commonsbooking-spacer);
    }
}