// Hide on desktop, show on mobile
.bw-show-on-mobile {
    display: none;
    @include on-mobile {
        display: inline-block;
    }
}

// Sizing
.bw-mega { font-size: $mega-font-size; }
.bw-large { font-size: $large-font-size; }
.bw-medium { font-size: $medium-font-size; }
.bw-normal { font-size: $normal-font-size; }
.bw-small { font-size: $small-font-size; }

// Basic header with action button availability
.bw-header {
    // Flex systme
    display: flex;
    flex-direction: row;
    align-items: stretch;

    // Spacing and border
    margin: $spacing-unit 0pt;
    border-bottom: 1px solid;

    // Title button
    .bw-title {
        flex: 1;
        margin: 0;
        color: inherit;
    }

    // Action button
    .bw-action {
        flex: 0;
        background-color: inherit;
        border: none;
        color: inherit;
        padding: $spacing-unit;
    }
}

// Front page header
.bw-page-header {
    @extend .bw-header;
    align-items: center !important;

    // Front header action
    .bw-action {
        @include cutout;
        padding: $spacing-unit 4*$spacing-unit/3 !important;
        background-color: $back-color !important;
        color: $white-color !important;
    }
}

// Content gutters
.bw-content-gutters {
    display: block;
    max-width: $gutters-width;
    margin-left: auto;
    margin-right: auto;
    @include on-tablet {
        max-width: 100%;
    }
    @include on-mobile {
        max-width: 100%;
    }
}

// Grid rows
.bw-row {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: $spacing-unit;

    // Create grid columns
    @for $i from 1 through 12 {
        .bw-col-#{$i} {
            grid-column-start: span $i;
            @include on-tablet {
                grid-column-start: span 12;
            };
        }
    }
}

// Custom buttons
.bw-text-button {
    border: none;
    background: none;
    display: inline-block;
    color: inherit;
    padding: $spacing-unit;
}
.bw-border-button {
    @extend .bw-text-button;
    border: 2px solid;
    border-color: $back-color;
}
.bw-cutout-button {
    @include cutout;
    border: none;
    display: inline-block;
    transition: box-shadow 0.5s;
    &:hover {
        box-shadow: none;
    }
}
.bw-raised-button {
    @include raised;
    border: none;
    display: inline-block;
    transition: box-shadow 0.5s;
    &:hover {
        box-shadow: none;
    }
}
.bw-emph-button {
    @extend .bw-cutout-button;
}

// Cutout section (appears as a recessed section that uses the back color)
.bw-cutout {
    @include block-cutout;
    .bw-border-button {
        border-color: $white-color;
    }
    .bw-emph-button {
        @extend .bw-raised-button;
    }
}

// Wraps an element with a horizontal scroll bar
.bw-horiz-scroll-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

// Basic horizontal rule
.bw-horiz-rule {
    display: block;
    width: 100%;
    border-bottom: 1px solid;
}

// Thumbnail image
.bw-thumbnail {
    max-width: 200px;
    max-height: 200px;
}