@use '@theorchard/suite-components/mixins' as mixins;

.SuiteColorSchemeV1 {
    .Bottom-nav {
        float: left;
        text-align: center;
        width: 100%;
    }

    .FormSection-header {
        padding-bottom: 20px;
    }

    .GlobalSearchIcon {
        background: var(--white);
        position: absolute;
        right: 10px;
        top: 25%;

        .ClearGlyph {
            fill: var(--gray-600);

            :hover {
                cursor: pointer;
                fill: var(--gray-800);
            }
        }
    }

    .ReactModal-popup-header {
        margin-bottom: 0;
        padding: 17px 15px;
    }

    .Select__multi-value__label {
        background-color: var(--info);
        border-radius: 4px 0 0 4px;
        color: var(--white);
    }

    .Select__multi-value__remove {
        background-color: var(--info);
        border-radius: 0 4px 4px 0;
        color: var(--white);

        &:hover {
            background-color: var(--info);
            color: var(--white);
        }
    }

    .SearchResultsLoadingIndicator {
        margin: 0 auto;
        padding: 30px 20px;

        .LoadingIndicator {
            transform: scale(0.5, 0.5);
        }
    }

    .table thead th {
        border-top: none;
        color: var(--gray-600);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        padding-bottom: 0.25em;
        padding-top: 0.25em;
        text-transform: uppercase;
    }

    .GridTable-container::-webkit-scrollbar {
        height: 7px;
    }

    .GridTable-container::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: 10px;
    }

    .GridTable-container::-webkit-scrollbar-thumb {
        background-color: var(--gray-500);
        border-radius: 10px;
    }

    .GridTable.bordered {
        min-height: 0;
    }

    .TooltipOverlay {
        z-index: 9999 !important;
    }
}

.List-top-nav {
    padding-bottom: 50px;

    .AddNewButton,
    .ActionButton {
        float: right;
    }

    .PaginationLinks {
        float: left;
    }
}

.Select__menu-portal {
    z-index: 1050 !important;
}

/* Temporary styling until suite-frontend is upgraded to >= 7.1.0 */
.SuitePageHeader-breadcrumb {
    padding: var(--padding-medium-small) var(--padding-large) !important;
}

.FieldMessage {
    @include mixins.text-body-small;

    margin-top: 2px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    gap: 4px;

    .GlyphIcon {
        flex-shrink: 0;
        align-self: normal;
        margin-top: 4px;
    }

    &.error {
        color: var(--text-error);

        .GlyphIcon {
            color: var(--glyphs-error);
        }

        input {
            border-color: var(--fields-stroke-error);
        }
    }

    &.warning {
        .GlyphIcon {
            color: var(--glyphs-warning);
        }
    }
}