// Contains colour variables for contrast themes

.fl-theme-bw {
    --fl-fgColor: #000000;
    --fl-bgColor: #ffffff;
}

.fl-theme-wb {
    --fl-fgColor: #ffffff;
    --fl-bgColor: #000000;
}

.fl-theme-yb {
    --fl-fgColor: #ffff00;
    --fl-bgColor: #000000;
}

.fl-theme-by {
    --fl-fgColor: #000000;
    --fl-bgColor: #ffff00;
}

.fl-theme-lgdg {
    --fl-fgColor: #bdbdbb;
    --fl-bgColor: #555555;
}

.fl-theme-gd {
    --fl-fgColor: #888888;
    --fl-bgColor: #222222;
    --fl-linkColor: #8080ff;
    --fl-disabledColor: #cc0000;
    --fl-selectedFgColor: #ffffff;
    --fl-selectedBgColor: #008000;
    --fl-buttonFgColor: #ffffff;
    --fl-buttonBgColor: #000000;
}

.fl-theme-gw {
    --fl-fgColor: #6c6c6c;
    --fl-bgColor: #ffffff;
    --fl-linkColor: #6666cc;
    --fl-disabledColor: #993333;
    --fl-selectedFgColor: #ffffff;
    --fl-selectedBgColor: #404080;
    --fl-buttonFgColor: #000000;
    --fl-buttonBgColor: #ffffff;
}

.fl-theme-bbr {
    --fl-fgColor: #000000;
    --fl-bgColor: #bb9966;
    --fl-linkColor: #000099;
    --fl-disabledColor: #600000;
    --fl-selectedFgColor: #ffffff;
    --fl-selectedBgColor: #000070;
    --fl-buttonFgColor: #000000;
    --fl-buttonBgColor: #ffd18a;
}

// General theme styling that applies to html elements and infusion components.
// !important is used for all styles to ensure that Preferences Framework's enactors are able to override the pages default styles.
[class*="fl-theme"]:not(.fl-theme-prefsEditor-default) {
    background-image: none !important;

    &, *, .fl-pre view-theme&,
    div, input,
    h1, h2, h3, h4, h5, h6 {
        color: var(--fl-fgColor) !important;
        background-color: var(--fl-bgColor) !important;
        border-top-color: var(--fl-fgColor) !important;
        border-right-color: var(--fl-fgColor) !important;
        border-bottom-color: var(--fl-fgColor) !important;
        border-left-color: var(--fl-fgColor) !important;
    }

    &:disabled,
    :disabled,
    :disabled legend,
    input[type="button"]:disabled,
    input[type="button"]:disabled *,
    input[type="reset"]:disabled,
    input[type="reset"]:disabled *,
    input[type="submit"]:disabled,
    input[type="submit"]:disabled *  {
        color: var(--fl-disabledColor) !important;
    }

    &::selection,
    ::selection {
        color: var(--fl-selectedFgColor) !important;
        background-color: var(--fl-selectedBgColor) !important;
    }

    iframe {
        border-top-color: var(--fl-fgColor) !important;
        border-right-color: var(--fl-fgColor) !important;
        border-bottom-color: var(--fl-fgColor) !important;
        border-left-color: var(--fl-fgColor) !important;
    }

    a,
    a *, {
        color: var(--fl-linkColor, var(--fl-fgColor)) !important;
        font-weight: bold !important;
        background-color: var(--fl-bgColor) !important;
    }

    button,
    button *,
    input[type="button"],
    input[type="button"] *,
    input[type="reset"],
    input[type="reset"] *,
    input[type="submit"],
    input[type="submit"] *,
    .fl-input-button,
    .fl-input-button * {
        color: var(--fl-buttonFgColor, var(--fl-fgColor)) !important;
        background-color: var(--fl-buttonBgColor, var(--fl-bgColor)) !important;
    }

    ::placeholder {
        color: currentColor;
        font-style: italic;
    }

    // Tables
    th {
        border-top-width: 0.1em;
        border-top-style: solid;
        border-top-color: var(--fl-fgColor) !important;
        border-right-width: 0.1em;
        border-right-style: solid;
        border-right-color: var(--fl-fgColor) !important;
        border-bottom-width: 0.1em;
        border-bottom-style: solid;
        border-bottom-color: var(--fl-fgColor) !important;
        border-left-width: 0.1em;
        border-left-style: solid;
        border-left-color: var(--fl-fgColor) !important;
        background-color: var(--fl-fgColor) !important;
        color: var(--fl-bgColor) !important;
    }

    td {
        border-top-width: 0.1em;
        border-top-style: solid;
        border-top-color: var(--fl-fgColor) !important;
        border-right-width: 0.1em;
        border-right-style: solid;
        border-right-color: var(--fl-fgColor) !important;
        border-bottom-width: 0.1em;
        border-bottom-style: solid;
        border-bottom-color: var(--fl-fgColor) !important;
        border-left-width: 0.1em;
        border-left-style: solid;
        border-left-color: var(--fl-fgColor) !important;
    }

    // Focus
    .fl-focus:focus, .fl-focus :focus, &.fl-focus :focus, .selectable {
        outline-width: 0.2em;
        outline-style: solid;
        outline-color: var(--fl-fgColor);
    }

    // Infusion Components
    // Reorderer
    .fl-reorderer-dropMarker {
        background-color: #f00 !important;
    }

    // Inline edit
    .fl-inlineEdit-edit {
        background-color: var(--fl-fgColor) !important;
        color: var(--fl-bgColor) !important;
        border-top-width: 0.1em;
        border-top-style: solid;
        border-top-color: var(--fl-bgColor) !important;
        border-right-width: 0.1em;
        border-right-style: solid;
        border-right-color: var(--fl-bgColor) !important;
        border-bottom-width: 0.1em;
        border-bottom-style: solid;
        border-bottom-color: var(--fl-bgColor) !important;
        border-left-width: 0.1em;
        border-left-style: solid;
        border-left-color: var(--fl-bgColor) !important;
        padding-top: 0.1em;
        padding-right: 0.1em;
        padding-bottom: 0.1em;
        padding-left: 0.1em;
        margin-top: -0.1em;
        margin-right: -0.1em;
        margin-bottom: -0.1em;
        margin-left: -0.1em;
    }

    // Textfield Stepper
    .fl-textfieldStepper .fl-textfieldStepper-textField {
        border: solid 1px var(--fl-fgColor);
    }

    .fl-textfieldStepper .fl-textfieldStepper-button:disabled {
        visibility: hidden;
    }

    .fl-textfieldStepper .fl-textfieldStepper-focus {
        outline-color: var(--fl-fgColor);
    }

    // Orator
    .fl-orator-highlight {
        color: var(--fl-bgColor) !important;
        background-color: var(--fl-fgColor) !important;
        outline-color: var(--fl-fgColor);
    }

    .fl-orator-controller-playToggle {
        text-shadow: unset;
    }

    .fl-icon-orator:before {
        background-color: var(--fl-bgColor);
        color: var(--fl-fgColor);
        text-shadow: unset;
    }

    .fl-orator-controller > *:not(:first-child):hover,
    .fl-orator-controller :hover .fl-orator-controller-playToggle,
    .fl-orator-controller :hover .fl-orator-controller-playToggle:before,
    .fl-orator-selectionReader-control:hover,
    .fl-orator-selectionReader-control:hover .fl-icon-orator:before,
    .fl-orator-selectionReader-control:hover * {
        background-color: var(--fl-fgColor) !important;
        color: var(--fl-bgColor) !important;
    }

    .fl-orator-selectionReader-control.fl-orator-selectionReader-above:after,
    .fl-orator-selectionReader-control.fl-orator-selectionReader-above:hover:after,
    .fl-orator-selectionReader-control.fl-orator-selectionReader-above:before {
        border-top-color: var(--fl-fgColor);
    }

    .fl-orator-selectionReader-control.fl-orator-selectionReader-below:after,
    .fl-orator-selectionReader-control.fl-orator-selectionReader-below:hover:after,
    .fl-orator-selectionReader-control.fl-orator-selectionReader-below:before {
        border-bottom-color: var(--fl-fgColor);
    }

    // Inverted color
    // General Styling
    &.fl-inverted-color, &.fl-inverted-color *, .fl-preview-theme&.fl-inverted-color {
        color: var(--fl-bgColor) !important;
        background-color: var(--fl-fgColor) !important;
        border-top-color: var(--fl-bgColor) !important;
        border-right-color: var(--fl-bgColor) !important;
        border-bottom-color: var(--fl-bgColor) !important;
        border-left-color: var(--fl-bgColor) !important;
    }

    .fl-focus:focus, .fl-focus :focus, &.fl-focus :focus, .selectable


    // Focus
    &.fl-inverted-color.fl-focus :focus,
    &.fl-inverted-color.fl-focus:focus,
    .fl-inverted-color.fl-focus :focus,
    .fl-inverted-color.fl-focus:focus,
    &.fl-focus .fl-inverted-color :focus,
    &.fl-focus .fl-inverted-color:focus,
    .fl-focus .fl-inverted-color :focus,
    .fl-focus .fl-inverted-color:focus {
        outline-width: 0.2em;
        outline-style: solid;
        outline-color: var(--fl-bgColor);
    }

    .fl-inverted-color {
        &, *,
        div, input,
        h1, h2, h3, h4, h5, h6 {
            color: var(--fl-bgColor) !important;
            background-color: var(--fl-fgColor) !important;
            border-top-color: var(--fl-bgColor) !important;
            border-right-color: var(--fl-bgColor) !important;
            border-bottom-color: var(--fl-bgColor) !important;
            border-left-color: var(--fl-bgColor) !important;
        }

        &::selection,
        ::selection {
            color: var(--fl-selectedBgColor) !important;
            background-color: var(--fl-selectedFgColor) !important;
        }

        iframe {
            border-top-color: var(--fl-bgColor) !important;
            border-right-color: var(--fl-bgColor) !important;
            border-bottom-color: var(--fl-bgColor) !important;
            border-left-color: var(--fl-bgColor) !important;
        }

        a,
        ^[0..-2] a.fl-inverted-color,
        a *,
        ^[0..-2] a.fl-inverted-color * {
            color: var(--fl-bgColor) !important;
            font-weight: bold !important;
            background-color: var(--fl-linkColor, var(--fl-fgColor)) !important;
        }

        button,
        ^[0..-2] button.fl-inverted-color,
        button *,
        ^[0..-2] button.fl-inverted-color *,
        input[type="button"],
        ^[0..-2] input[type="button"].fl-inverted-color,
        ^[0..-2] input[type="button"].fl-inverted-color *,
        input[type="reset"],
        ^[0..-2] input[type="reset"].fl-inverted-color,
        ^[0..-2] input[type="reset"].fl-inverted-color *,
        input[type="submit"],
        ^[0..-2] input[type="submit"].fl-inverted-color,
        ^[0..-2] input[type="submit"].fl-inverted-color *,
        .fl-input-button,
        &.fl-input-button,
        .fl-input-button *,
        &.fl-input-button * {
            color: var(--fl-buttonBgColor, var(--fl-bgColor)) !important;
            background-color: var(--fl-buttonFgColor, var(--fl-fgColor)) !important;
        }

        // Tables
        th {
            border-top-width: 0.1em;
            border-top-style: solid;
            border-top-color: var(--fl-bgColor) !important;
            border-right-width: 0.1em;
            border-right-style: solid;
            border-right-color: var(--fl-bgColor) !important;
            border-bottom-width: 0.1em;
            border-bottom-style: solid;
            border-bottom-color: var(--fl-bgColor) !important;
            border-left-width: 0.1em;
            border-left-style: solid;
            border-left-color: var(--fl-bgColor) !important;
            background-color: var(--fl-bgColor) !important;
            color: var(--fl-fgColor) !important;
        }

        td {
            border-top-width: 0.1em;
            border-top-style: solid;
            border-top-color: var(--fl-bgColor) !important;
            border-right-width: 0.1em;
            border-right-style: solid;
            border-right-color: var(--fl-bgColor) !important;
            border-bottom-width: 0.1em;
            border-bottom-style: solid;
            border-bottom-color: var(--fl-bgColor) !important;
            border-left-width: 0.1em;
            border-left-style: solid;
            border-left-color: var(--fl-bgColor) !important;
        }

        // Infusion focus element
        .fl-focus:focus, .fl-focus :focus, .selectable {
            outline-width: 0.2em;
            outline-style: solid;
            outline-color: var(--fl-bgColor);
        }

        // Infusion Components
        // Reorderer
        .fl-reorderer-dropMarker {
            background-color: #f00 !important;
        }

        // Inline Edit
        .fl-inlineEdit-edit {
            background-color: var(--fl-bgColor) !important;
            color: var(--fl-fgColor) !important;
            border-top-width: 0.1em;
            border-top-style: solid;
            border-top-color: var(--fl-fgColor) !important;
            border-right-width: 0.1em;
            border-right-style: solid;
            border-right-color: var(--fl-fgColor) !important;
            border-bottom-width: 0.1em;
            border-bottom-style: solid;
            border-bottom-color: var(--fl-fgColor) !important;
            border-left-width: 0.1em;
            border-left-style: solid;
            border-left-color: var(--fl-fgColor) !important;
            padding-top: 0.1em;
            padding-right: 0.1em;
            padding-bottom: 0.1em;
            padding-left: 0.1em;
            margin-top: -0.1em;
            margin-right: -0.1em;
            margin-bottom: -0.1em;
            margin-left: -0.1em;
        }

        // Orator
        .fl-orator-highlight {
            color: var(--fl-fgColor) !important;
            background-color: var(--fl-bgColor) !important;
            outline-color: var(--fl-bgColor);
        }

        .fl-icon-orator:before {
            background-color: var(--fl-fgColor);
            color: var(--fl-bgColor);
        }

        .fl-orator-controller > *:not(:first-child):hover,
        .fl-orator-controller :hover .fl-orator-controller-playToggle:before {
            background-color: var(--fl-bgColor) !important;
            color: var(--fl-fgColor) !important;
        }

        .fl-orator-selectionReader-control:hover,
        .fl-orator-selectionReader-control:hover .fl-icon-orator:before,
        .fl-orator-selectionReader-control:hover * {
            background-color: var(--fl-bgColor) !important;
            color: var(--fl-fgColor) !important;
        }

        .fl-orator-selectionReader-control.fl-orator-selectionReader-above:after,
        .fl-orator-selectionReader-control.fl-orator-selectionReader-above:hover:after,
        .fl-orator-selectionReader-control.fl-orator-selectionReader-above:before {
            border-top-color: var(--fl-bgColor);
        }

        .fl-orator-selectionReader-control.fl-orator-selectionReader-below:after,
        .fl-orator-selectionReader-control.fl-orator-selectionReader-below:hover:after,
        .fl-orator-selectionReader-control.fl-orator-selectionReader-below:before {
            border-bottom-color: var(--fl-bgColor);
        }

        // TextfieldStepper
        .fl-textfieldStepper .fl-textfieldStepper-focus {
            outline-color: var(--fl-bgColor);
        }
    }
}