/********************************************************************************************/
/*	Icon Buttons                                                                            */
/********************************************************************************************/

.action-button-icon {
    background: #fff;
    padding: 5px;
    box-shadow: none;
    margin: 5px;
    display: inline-block;
    border: 1px solid #89929A;
    border-radius: 3px;
}

button.action-button-icon{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.action-button-icon--rotate-180 img{
    transform: rotate(180deg);
}

.action-button-icon-disabled {
    background: #fff;
    padding: 5px;
    box-shadow: none;
    margin: 5px;
    display: inline-block;
    border: 1px solid #89929A;
    border-radius: 3px;
    opacity: 0.4;
    background-color: #e2e2e2;
    cursor: default;
}

    .action-button-icon img, .action-button-icon-disabled img {
        vertical-align: bottom;
        width: 16px;
        height: 16px;
    }

.action-button-icon:hover {
    background: #f4fafb;
}


/********************************************************************************************/
/*	Filter statements																		*/
/********************************************************************************************/

.filter-statements {
    margin-bottom: 5px;
    line-height: 3.4rem;
}

/*  Report filter panels only - set, assessor and template names are long enough to need wrapping. */
.dropdown.dropdown-tip .dropdown-menu {
    max-width: min(550px, 90vw);
}

    .dropdown.dropdown-tip .dropdown-menu label {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .filter-statements > a,
    .filter-statements > button {
        padding: 2px 18px 2px 5px;
        display: inline-block;
        color: var(--colour-input-text-default);
        text-decoration: none;
        border: var(--layout-border-thickness-default) solid var(--colour-input-border-default);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px; /*text-shadow: 1px 1px #fff;*/
        letter-spacing: 0.5px;
        background: var(--colour-input-background-default);
        background-image: url("../../Content/images/icons/SVGs/chevron.svg");
        background-position: right;
        background-repeat: no-repeat;
        margin-top: 1px;
        margin-bottom: 1px;
    }

    .filter-statements > button {
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    /*  The label is the current selection, which can run to several names - let it wrap rather than clip. */
    .filter-statements > a,
    .filter-statements > button {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    /*  Sized to match the activity and sort by selects on the submissions list, and coloured
        from the same tokens as the panel triggers so the two read as one set of controls. */
    .filter-statements > select {
        color: var(--colour-input-text-default);
        background-color: var(--colour-input-background-default);
        border: var(--layout-border-thickness-default) solid var(--colour-input-border-default);
        height: 3.4rem;
        max-width: 100%;
        margin: 1px 0;
        padding-top: 0;
        box-sizing: border-box;
        font: inherit;
        vertical-align: middle;
        cursor: pointer;
    }

        .filter-statements > a:hover,
        .filter-statements > button:hover {
            background-color: #f4f4f4;
        }

/********************************************************************************************/
/*	Page Actions																			*/
/********************************************************************************************/

.action-container > a, a.action-button, a.action-button-disabled, a.action-button-selected, .action-container > button, button.action-button, button.action-button-disabled {
    letter-spacing: -.05px;
    font-size: 1.2rem;
    color: #0077BB;
}

.action-container > a, .action-container > button, a.action-button, button.action-button, a.action-button-disabled, button.action-button-disabled, a.action-button-selected {
    display: inline-block;
    background: #fff;
    border: 1px solid #89929A;
    border-radius: 3px;
    line-height: 32px;
    padding: 0 15px;
    margin: 0 10px 0 0;
    white-space: normal;
    max-width: 100%;
    overflow-wrap: break-word;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

/*  The display rules above outrank the browser's own [hidden] styling, so this restores it  */
.action-container > a[hidden], .action-container > button[hidden] {
    display: none;
}

.action-container > button, button.action-button, button.action-button-disabled {
    font-family: inherit;
}

    .action-container > a:hover, .action-container > button:hover, a.action-button:hover, button.action-button:hover {
        background: #f4fafb;
    }


    .action-container > a img, .action-container > button img, a.action-button img, a.action-button-disabled img, a.action-button-selected img {
        vertical-align: text-bottom;
        padding: 0px;
        padding-right: 5px;
        width: 16px;
        height: 16px;
        border: none;
        margin: 0px;
    }

a img {
    padding: 3px;
    vertical-align: text-bottom;
}

.action-container > a.selected, a.action-button-selected {
    color: #333333;
    border: 1px solid black;
    background: #cce2ff;
}

a.disabled, a.action-button-disabled, button.action-button-disabled, a.action-button .disabled, .action-button-icon-disabled {
    color: #121212;
    background: #f4f4f4;
    cursor: default;
    /*pointer-events: none; should only be used for interacting with SVGs. Blocks tooltips :/ */
    opacity: .8;
}

    a.disabled img, a.action-button-disabled img, button.action-button-disabled img, .action-button-icon-disabled {
        opacity: 0.4;
    }

button.action-button-disabled.action-button-disabled--modern{
    color: var(--colour-action-outlined-primary-text-disabled);
    font-weight: var(--font-weight-semi-bold);
    background: var(--colour-action-outlined-primary-background-disabled);
}


.action-container > a.highlight, a.action-button-highlight {
    background: #e2c1df;
}

.action-container > a, .action-container > button {
    margin: 10px 0 0 10px;
}

    .action-container > a:last-of-type, .action-container > button:last-of-type {
        margin-right: 10px;
    }

.action-container-right-side {
    float: right;
    padding: 10px 0;
}

.set-actions-wrapper {
    margin-top: 10px;
    float: right;
}

    .set-actions-wrapper > a {
        margin-right: 0;
        margin-left: 10px;
    }

.action-mixed-container > a {
    font-size: 1.2rem;
    line-height: 32px;
    margin: 0;
}

    .action-mixed-container > a.action-button-icon {
        padding: 0 5px;
    }

    .action-mixed-container > a > img {
        vertical-align: text-bottom;
        padding: 0 3px;
    }

/* Special overrides for save/cancel panel at bottom of screen and set action alignment*/
.panel.action-container > a, .panel.action-container > button, #create_component_container > button {
    margin: 0 10px 0 0;
}

.primary-action {
    padding: 0 20px;
    min-width: 70px;
    text-align: center;
}

    .primary-action.disabled, .primary-action.action-button-disabled {
        opacity: .4; /* lower opacity because of darker contrast */
    }

    .primary-action > img {
        display: none;
    }

.primary-action, .manager-buttons > a.action-button.selected {
    background: #0566a9 !important;
    border-color: #0566a9 !important;
    color: #fff !important;
}

    .primary-action:hover, .manager-buttons > a.action-button.selected:hover {
        background: #044e81 !important;
        border-color: #044e81 !important;
    }

    .primary-action:focus-visible, .manager-buttons > a.action-button.selected:focus-visible {
        outline: 1px solid #fff;
        outline-offset: -2px;
    }