@import "~@/style/var";
@import "~el-admin-layout/src/style/var";
@import "~@/style/mixin.scss";

.detail-page {
    &.el-loading-parent--relative {
        position: static !important;
    }

    &-header {
        margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin};
        padding: 16px 32px 0 32px;
        background-color: $--color-white;
        border-bottom: $--border-base;

        > .el-page-header {
            padding: 0 0 24px 0;

            .el-page-header__left:hover {
                color: $--color-primary;
            }
        }

        > .el-row {
            display: flex;
            width: 100%;
            margin-bottom: 12px;

            @include mobile {
                display: block;
            }
        }

        &-left {
            width: 100%;
            overflow: hidden;

            .el-col {
                margin-bottom: 16px;
            }
        }

        &-extra {
            min-width: 242px;
            margin-left: 88px;

            @media (max-width: $--lg) {
                margin-left: 44px;
            }

            @media (max-width: $--md) {
                margin-left: 20px;
            }

            @media (max-width: $--sm) {
                margin-left: 0;
            }

            > div {
                display: flex;
                justify-content: space-between;
                width: 200px;
            }

            &-title {
                margin-bottom: 4px;
                color: $--color-text-secondary;
                font-size: 14px;
            }

            &-content {
                margin-top: 12px;
                color: $--color-text-primary;
                font-size: 24px;
            }
        }

        &-description {
            span {
                display: inline-flex;
                align-items: baseline;
            }

            &-label {
                color: $--color-text-primary;
                font-weight: 400;
                font-size: 14px;
                line-height: 1.5715;
                text-align: start;
            }

            &-content {
                color: $--color-text-regular;
                font-size: 14px;
                line-height: 1.5715;
            }
        }
    }

    > .el-form > .el-row > .el-card {
        margin-top: 16px;
    }

    &-footer {
        @include clearfix;
        position: absolute;
        width: 100%;
        right: 0;
        bottom: 0;
        z-index: 1;
        transition: all 0.3s ease 0s;
        height: 56px;
        padding: 0 24px;
        line-height: 56px;
        border-top: $--border-base;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
        backdrop-filter: blur(3px);

        &-left {
            float: left;
        }

        &-right {
            float: right;
        }
    }
}
