cp.scss

@import "~@pyro/admin-theme/lib/styling/base";

$table-background         : #FFFFFF;
$table-striped-background : #F5F5F5;
@import '~foundation-sites/scss/components/_table.scss';

$cp-prefix                : #{$prefix}-cp;

.#{$cp-prefix} {

    padding : 0 20px;


    &-roles {
        margin-bottom : 10px;

        &__items {
            display : flex;
        }

        &__items > &__item {
            border : none;

            &--tag {
                margin-right : 5px;
            }
        }

        &__item {
            padding     : 15px 20px 15px;
            margin-left : 0 !important;

            &.is-active {
                font-weight : 500;
                //order: -1;
            }


            &--tag {

            }

            &--button {}
        }

        &__spacer {
            flex-grow : 1;
        }
    }


    &-actions {
        margin-bottom : 10px;

        &__list {
            list-style-type : none;
            padding-left    : 0;
        }

        &__item {
        }

        &__link {}
    }

    &-action {}

    &-fields {
        margin-bottom : 10px;

        > .#{$namespace}-card__header {
            font-family   : $font-family-headings;
            font-weight: $font-weight-headings;
            padding: 18px 14px;
        }

        > .#{$namespace}-card__body {
            padding : 0;
        }

        &__table {
            @include table($nest : true);
            @include table-hover();
            margin-bottom : 0;
        }
    }

    &-field {

        &__title {
            font-weight : $font-weight-headings;
            width       : 30%;
        }

        &__header {
            //background: #dfdfdf;
            background    : $--table-header-background-color;
            background    : #eaeaea;

            font-family   : $font-family-headings;
            font-weight: $font-weight-headings;
            //padding-top   : 20px !important;
            //border-bottom : 1px solid #D0D0D0;
            border-bottom: 1px solid #dfdede;
            padding: 5px 10px !important;
        }
    }

    &-widgets {}

    &-widget {
        margin-bottom : 10px;

        > .el-card__header {
            padding     : 5px 5px 5px 19px;
            font-size   : 12px;
            font-weight : 500;
            line-height : 24px;
        }

        &__body {}

        &__button {
        }

        &__header-title {
            flex-grow : 1;
            font-family   : $font-family-headings;
            font-weight: $font-weight-headings;
        }

        &__header {
            display : flex;
        }

    }


    &-content {
        > .el-card__header {
            padding : 0;
        }

        // cp > cp-content > __header
        &__header {
            padding : 15px 20px;

            // cp > cp-content > __header > __header-icon
            &-icon {
                margin-right   : 10px;
                color          : white;
                font-weight    : bold;
                font-size      : 25px;
                vertical-align : middle;
            }

            // cp > cp-content > __header > __header-title
            &-title {
                // cp > cp-content > __header > __header-title > __header-title-role
                &-role {
                    font-weight : 500;
                }

                // cp > cp-content > __header > __header-title > __header-title-name
                &-name {
                    font-weight : 500;
                }
            }
        }

        &__messages {
            margin-bottom: 15px;
        }

        // cp > cp-content > __body
        &__body {}


    }

}