/* stylelint-disable */

/**
 * This file contains corrections for FRC, all these fixes should end up in FRC later
 */

// TODO: https://jira.theorchard.com/browse/DATA-7561
.RadioButton-radio {
    &.form-control {
        display: inline-block !important;
        height: auto !important;
        width: auto !important;
    }
}

// TODO: https://jira.theorchard.com/browse/DATA-7560
.btn {
    &.active {
        box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .2) !important;
    }
}

// TODO: https://jira.theorchard.com/browse/DATA-7562
.ButtonsRow-active {
    box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, .2) !important;
}

// TODO: In workstation, the last line of the stylesheet has: .ButtonsRow { width: auto }, this should be removed
.ButtonsRow {
    width: 100%;

    .btn {
        height: auto;
        display: inline;
        padding: .65rem 1.2rem;
        border: 1px solid var(--midnight-300);

        &.ButtonsRow-active {
            background-color: var(--midnight-200);
        }
    }
}

// TODO: Replace all <Modal> usages + remove Modal component, use the Modal component from FRC
.modal {
    overflow: visible;
    border: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-overflow-scrolling: touch;
    outline: 0;

    &-dialog {
        margin: 0 auto;
    }

    &-content {
        background: white;
        border-radius: 3px;
        border: 1px solid #BAB7B7;
        box-shadow: 0 15px 12px 0 rgba(0, 0, 0, .22), 0 19px 38px 0 rgba(0, 0, 0, .3);
        position: relative;
    }

    &-header {
        padding: 10px 0;
        margin: 0;
        border-bottom: 1px solid #C8C6C5;
        background: none;

        h3 {
            margin: 0 15px;
        }

        button {
            &.close {
                color: #ccc;
                padding: 0;
                font-size: 36px;
                font-weight: 300;
                border: 0;
                margin: 5px;
                box-shadow: none;
                outline: 0;
                position: absolute;
                right: 0;
                top: 0;

                &:hover {
                    color: #4a4a4a;
                }
            }
        }
    }

    &-body {
        padding: 20px;

        h4 {
            margin: 0 0 15px 0;
        }
    }

    &-footer {
        border: none!important;
        padding: 15px;
    }
}

// Utility classes for bootstrap:

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

// Missing sub navs

.main-subnav {
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 20px;
    padding-top: 30px;

    a {
        border-bottom: 2px solid transparent;
        color: #A8A0A0;
        display: inline-block;
        font-size: 18px;
        font-weight: 500;
        margin-right: 30px;
        margin-bottom: -1px;
        padding-bottom: 10px;
        text-decoration: none;
    }

    a.active {
        border-bottom: 2px solid #4A4A4A;
        color: #4A4A4A;
        cursor: pointer;
    }
}

// TODO: https://jira.theorchard.com/browse/DATA-7574
.popover {
    box-shadow: 0 5px 10px rgba(0,0,0,.2);

    > span {
        display: block;
        padding: 9px 14px;
    }
}

h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 14px;
}

h4 {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-top: 17px;
}

// TODO: https://jira.theorchard.com/browse/DATA-7586
.tooltip {
    padding: 0 !important;
    position: absolute !important;
    z-index: 1070 !important;
    display: block !important;
    margin: 0 !important;
    font-family: Rubik,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-align: start !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-break: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
    line-break: auto !important;
    font-size: .875rem !important;
    word-wrap: break-word !important;
    opacity: 0 !important;
}

.tooltip.show {
    opacity: .9 !important;
}

.tooltip .arrow {
    position: absolute !important;
    display: block !important;
    width: .8rem !important;
    height: .4rem !important;
}

.tooltip .arrow:before {
    position: absolute !important;
    content: "" !important;
    border-color: transparent !important;
    border-style: solid !important;
}

.tooltip-inner {
    max-width: 200px !important;
    padding: .25rem .5rem !important;
    color: #fff !important;
    text-align: center !important;
    background-color: #1c1c1c !important;
    border-radius: .25rem !important;
}

.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top {
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow {
    bottom: 0
}

.bs-tooltip-auto[x-placement^=top] .arrow:before,.bs-tooltip-top .arrow:before {
    top: 4px;
    border-width: .4rem .4rem 0;
    border-top-color: #1c1c1c !important;
}

.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right {
    padding: 0 .4rem
}

.bs-tooltip-auto[x-placement^=right] .arrow,.bs-tooltip-right .arrow {
    left: 0;
    width: .4rem;
    height: .8rem
}

.bs-tooltip-auto[x-placement^=right] .arrow:before,.bs-tooltip-right .arrow:before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #1c1c1c !important;
}

.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom {
    padding: .4rem 0
}

.bs-tooltip-auto[x-placement^=bottom] .arrow,.bs-tooltip-bottom .arrow {
    top: 0;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow:before,.bs-tooltip-bottom .arrow:before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #1c1c1c !important;
}

.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left {
    padding: 0 .4rem;
}

.bs-tooltip-auto[x-placement^=left] .arrow,.bs-tooltip-left .arrow {
    right: 0;
    width: .4rem;
    height: .8rem;
}

.bs-tooltip-auto[x-placement^=left] .arrow:before,.bs-tooltip-left .arrow:before {
    left: 0;
    border-width: .4rem 0 .4rem .4rem;
    border-left-color: #1c1c1c !important;
}

// TODO: https://jira.theorchard.com/browse/DATA-7587
.CollapsableAlert {

    border-radius: 3px;

    &-button {
        background: none;
        border: none;
        color: var(--bluejay);
        display: flex;
        font-weight: $weight_bold;
        margin-left: auto;
        margin-right: 20px;
        padding: 0;

        .Icons-down-direction-arrow,
        .Icons-up-direction-arrow {
            fill: var(--bluejay);
            margin-left: 3px;
        }
    }

    &-expanded-contents {
        border-top: 1px solid $grey_200;
    }

    &-subtitle {
        line-height: 20px;
    }

    &-titles {
        margin-bottom: 12px;
        margin-top: 12px;
    }

    &-top-banner {
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    &-danger {
        background-color: var(--parrot_light);
        color: var(--parrot);

        &-title {
            color: var(--parrot);
            font-size: 14px;
            font-weight: $weight_bold;
            line-height: 16px;
            margin-top: 0;
        }

        .Icons-attention-error {
            height: 32px;
            margin-left: 15px;
            margin-right: 15px;
            width: 32px;
        }
    }

    &-warning {
        color: var(--fox);

        &-title {
            color: var(--fox);
            font-size: 14px;
            font-weight: $weight_bold;
            line-height: 16px;
            margin-top: 0;
        }

        .Icons-attention-incomplete {
            height: 32px;
            margin-left: 15px;
            margin-right: 15px;
            width: 32px;
        }
    }
}


// TODO: https://jira.theorchard.com/browse/FRC-28
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: var(--white);
    text-align: center;
    background-color: var(--bluejay);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: $grey_140;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}