@import "src/variables";
@import "src/components";

.page-cards {
    padding: 0 20px 20px 20px;
}

.page-card {
    margin: 20px 0 0 0;
    background: $container-background-color;
    border-radius: $border-radius;
    padding: 0 20px;
    box-shadow: $box-shadow;

    > .card-header {
        display: flex;
        align-items: center;
        height: 56px;
        width: 100%;

        > .header-title {
            font-weight: $semi-bold;
            text-transform: capitalize;
            text-align: left;
            flex: 1;
        }
    }

    > .card-row {
        display: flex;
        align-items: center;
        border-top: 1px solid $border-color;
        height: 56px;
        color: $font-color-primary;

        > .value {
            flex: 1;
        }

        > .end-value {
            > i {
                color: $primary-color;
                font-size: 20px;
            }
        }
    }
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid $border-color;
    padding: 12px 0;

    > * {
        @extend %primary-button;
    }

    > *:not(:first-child) {
        margin-left: 8px;
    }
}

.card-table {
    .table-columns {
        display: flex;
        max-width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: unset;

        .table-column {
            flex: 1;

            .table-row {
                min-height: 56px;
                display: flex;
                align-items: center;
                flex: 1;

                .cell {
                    display: flex;
                    align-items: center;
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: unset;
                    min-width: 50%;
                    flex: 1;

                    > span:first-of-type {
                        color: $font-color-secondary;
                    }

                    > span:last-of-type {
                        margin-left: 8px;
                        flex: 1;
                        white-space: normal;
                        overflow: hidden;
                        text-overflow: unset;
                    }
                }

                > .cell:not(:first-of-type) {
                    margin-left: 20px;
                }
            }

            .table-row:not(:first-of-type) {
                border-top: 1px solid $border-color;
            }

            .table-row.row-vertical {
                min-height: 72px;
                padding: 12px 0;
                height: auto;

                .cell {
                    flex-direction: column;
                    align-items: flex-start;

                    span:last-of-type {
                        margin: 0;
                        white-space: normal;
                        overflow: visible;
                        min-height: 21px;
                    }
                }
            }
        }

        @for $i from 1 through 20 {
            .table-column:first-child:nth-last-child(#{$i}),
            .table-column:first-child:nth-last-child(#{$i}) ~ .table-column {
                width: calc(100% / #{$i} - (16px / #{$i}));
            }
        }

        .table-column:not(:first-of-type) {
            margin-left: 20px;
        }
    }

    .large-rows {
        .table-column {
            .table-row {
                height: 56px;
            }
        }
    }
}

.page-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .page-modal-background {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
    }

    .page-modal-card {
        background: #fff;
        position: relative;
        border-radius: $border-radius;
        box-shadow: $box-shadow;
        z-index: 10;
        width: 70vw;
        min-width: 0px;
        max-width: 600px;

        .page-modal-header {
            display: flex;
            align-items: center;
            height: 56px;
            padding: 0 20px;

            .header-title {
                flex: 1;
                font-weight: $semi-bold;
            }

            > .close-button {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 8px;
                height: 40px;
                width: 40px;
                background: #fff;
                border: none;
                font-size: 18px;
            }
        }

        .page-modal-body {
            border-top: 1px solid $border-color;
            padding: 0 20px;
        }

        .page-modal-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 12px 20px;
            border-top: 1px solid $border-color;

            button {
                @extend %primary-button;
            }

            button:not(:first-of-type) {
                margin-left: 8px;
            }

            .red {
                background: $red-color-translucent;
                color: $red-color;
            }

            .green {
                background: $green-color-translucent;
                color: $green-color;
            }
        }
    }
}

.border-bottom {
    border-bottom: 1px solid $border-color;
}
