@use "sass:math";

.page {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    max-width: 100%;

    &.fullscreen {
        position: fixed;
        z-index: $zindex-fullscreen;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: var(--#{$prefix}body-bg); // regular page container has no background. We need to hide what is under
        overflow-y: auto; // get the scrollbar
    }
}

.fullscreen-close {
    position: absolute;
    z-index: $zindex-fullscreen;
    top: ($grid-gutter-width * .5);
    right: $grid-gutter-width;
    font-size: 36px;
    line-height: 1;
    opacity: 0.6;

    @include text-movie-subtitles();

    &:hover,
    &.hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        opacity: 1;
    }
}

.page-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-shrink: 0;
    flex-wrap: wrap;
    background-color: $page-header-bg;

    padding: $page-header-padding;
    margin: 0;
    border-bottom: $page-header-border-width solid $page-header-border-color;

    @include box-shadow($page-header-box-shadow);
}

.page-poster {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 320px;

    // use movie subtitles styles to make title always readable
    // maybe one day add a background checker
    .page-title,
    .page-title > small,
    .page-actions .page-actions-btn {
        @include text-movie-subtitles();
    }
}

.page-icon {
    order: 1;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    margin: 0 ($grid-gutter-width * .5);

    > * {
        max-width: 100%;
        max-height: 100%;
    }
}

.page-title {
    order: 2;
    flex: 1;
    color: $page-title-color;
    font-weight: $page-title-font-weight;

    @include font-size($page-title-font-size);

    margin: $grid-gutter-width * .5;

    small {
        color: $page-subtitle-color;
        font-weight: $page-subtitle-font-weight;
    }
}

.page-actions {
    order: 3;
    margin: $grid-gutter-width * .5;
    margin-left: auto;
    white-space: nowrap;
}

.page-actions-separator {
    display: inline-block;
    margin: 0 5px;
}

// Current styles permit to have 7 buttons in one line on 360px screens (without btn groups)
.page-actions-btn {
    position: relative; // for buttons with labels
    text-align: center;
    border-radius: (.65em * 2) + 1.25em;
    padding: .65em;
    font-size: 1.25em;
    line-height: 1.25em;

    border: 1px solid transparent !important; // not perfect, it's required to override default btn border

    /*&.default {
        @include button-variant($page-action-default-color, $page-action-default-bg, $page-action-default-border);
    }

    &.primary {
        @include button-variant($page-action-primary-color, $page-action-primary-bg, $page-action-primary-border);
     }

    &.danger {
        @include button-variant($page-action-danger-color, $page-action-danger-bg, $page-action-danger-border);
    }*/

    // displays icon as a square
    .action-icon {
        width: 1.25em;
    }

    // puts labels in the bottom right corner
    .action-subscript {
        position: absolute;
        top: auto; // reset bootstrap default
        bottom: -5px;
        right: 0;
        font-size: .75rem;
        line-height: 1;
    }
}

.page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; // only specifying flex property here make the item fill the remaining space in its parent
}

.page-section {
    margin-left: -$grid-gutter-width*.5; // to escape the page-content container-fluid
    margin-right: -$grid-gutter-width*.5; // to escape the page-content container-fluid
}

.page-icon {
    .tool-icon,
    .resource-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: 50%;
        font-size: 32px;
        padding: ($grid-gutter-width * .5);
    }

    .tool-icon {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: map-get($grid-breakpoints, 'sm')) {
    .page-header {
        flex-wrap: wrap;
    }
}
