@import "../../styles/modules/importAll";

.EntityTypeHeader {

    ul,
    ol {
        list-style: none;
    }

    .EntityTypeHeaderContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 20px;
        width: 100%;
        .TopRowContainer{
          display: flex;
        }
        .TotalFormSubmissions{
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
          letter-spacing: 0px;
          text-align: left;
          margin-left: 5px;
          margin-top: -4px;
          opacity: 0.7;
        }
    }

    .entityInfo {
        width: 60%;
        background-color: white;
        border-right: 0.1rem solid $lightBlueGrey;
    }

    .entityTitle {
        &.default {
            font-style: italic;
            color: $darkGrey;
        }

        span {
            font-size: 17px;
            padding: 0 4px;

            @include noWrapTxt;
        }

        &.clickable {
            span {
                border: 1px solid transparent;

                &:hover {
                    border: 1px solid $textSecondary;
                    cursor: text;
                }
            }
        }
    }

    .EntityTitleInput {
        font-size: 18px;
        line-height: 2em;
        color: $darkGrey;
        flex-direction: column;
        input{
          font-size: 18px;
        }
    }

    .saveStatus {
        color: $textSecondary;
        font-size: 14px;
        padding: 0px 4px;
        margin-top: 8px;
        margin-left: 10px;
        .clickable {
            text-decoration: none;
            text-transform: uppercase;
            color: $lumenGreen;
            font-size: 12px;
        }
    }

    .overflow {
        border: 0.1rem solid $lightBlueGrey;

        @include border-radius(3px);

        padding: 0.5rem;
        margin: 0.25rem 0.5rem;
    }

    .link-button {
        font-size: inherit;
        border: none;
        outline: none;
        padding: 0px 10px;
        cursor: pointer;
        background-color: transparent;

        &:focus {
            border: none;
            outline: none;
        }
    }

    .sub-action {
        padding: 0.5rem 2.5rem 0.5rem 1.5rem;
        text-align: left;

        &:after {
            content: '';
            height: 0px;
            width: 0px;
            border-top: 0.4rem solid rgb(30, 30, 30);
            border-left: 0.4rem solid transparent;
            border-right: 0.4rem solid transparent;
            position: absolute;
            top: 1.3rem;
            right: 1.5rem;
        }

        &.disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }
    }
}
