@import '~assets/styles/motion-styles-common';

span {
    margin: 0;
}

.extra-controls-slot {
    div {
        padding: 0px;
        button {
            .mat-button-wrapper {
                display: inherit;
            }
            font-size: 100%;
        }
        span {
            font-size: 80%;
        }
    }
}

.motion-content {
    display: flow-root;
}

.motion-text-toolbar-wrapper {
    display: flex;
    justify-content: flex-end;

    button {
        font-weight: 400;
    }
    margin-bottom: 16px;

    > button {
        // Prevent moving the buttons when the "go to line"-input is shown
        margin-top: 7px;
    }

    .motion-text-controls {
        .motion-goto-line {
            width: 150px;
        }
        input[type='number']::-webkit-inner-spin-button,
        input[type='number']::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type='number'] {
            -moz-appearance: textfield;
        }
    }
}

.meta-info-panel {
    padding-top: 25px;

    a:hover {
        cursor: pointer;
    }
}

.mat-accordion {
    display: block;
    margin-top: 0px;
}

.mat-expansion-panel {
    padding-top: 0;
    .expansion-panel-custom-body {
        padding-left: 55px;
    }
}

.statute-amendment-selector {
    mat-form-field {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
}

.amendment-line-header {
    font-style: italic;
}

.motion-content {
    h4 {
        margin: 10px 10px 15px 0;
        display: block;
        font-weight: 500;
        font-size: 110%;
    }

    h5 {
        margin: 15px 10px 10px 0;
        display: block;
        font-weight: 500;
        font-size: 100%;
    }

    .motion-text {
        clear: both;
        margin-left: 0px;
    }

    //the assembly may decide ...
    .text-prefix-label {
        display: block;
        margin: 0 10px 20px 0px;
    }

    .extra-data {
        margin-top: 1em;
    }

    .content-field {
        display: inline-block;
        width: 100%;
    }

    .form-id-title {
        display: flex;

        .form-identifier {
            flex: 0 0 95px;
            max-width: 95px;
            margin-right: 1em;
        }

        .form-title {
            flex: 1 1 auto;
        }
    }
}

.desktop-view {
    .desktop-left {
        width: 30%;
        float: left;
        padding-right: 25px;
    }

    .desktop-right {
        .os-form-card {
            margin-bottom: 20px;
        }

        .os-card {
            display: grid;
            max-width: 900px;
            min-width: 400px;
            margin-left: 0 !important;
            margin-top: 0 !important;
        }
    }
}

.mobile-view {
    .os-card {
        padding: 27px;
        max-width: calc(100% - 54px);
    }
}
.title-line {
    display: flex;

    .motion-title {
        position: relative;
        z-index: 1;

        // Grab the left padding of the parent element to catch hover-events for the :before element
        margin-left: -20px;
        padding-left: 20px;

        .change-title {
            position: relative;
            width: 0;
            height: 0;
        }

        .change-title:before {
            position: absolute;
            top: 18px;
            left: -17px;
            display: none;
            cursor: pointer;
            content: '';
            width: 16px;
            height: 16px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23337ab7"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
            background-size: 16px 16px;
        }

        &:hover .change-title:before {
            display: block;
        }

        .title-change-indicator {
            background-color: #0333ff;
            position: absolute;
            width: 4px;
            height: 32px;
            left: 10px;
            top: 5px;
            cursor: pointer;
        }
    }
}

.create-poll-button {
    margin-top: 10px;
    button {
        padding: 0px;
    }
}

.mat-chip-list-stacked {
    .mat-chip {
        margin: 4px 4px 4px 4px;
    }
}

.supporters {
    font-size: 12px;
    margin-top: 4px;
}

.show-entire-text-check {
    font-size: 70%;
    float: right;
}
