@import "../../../node_modules/@salesforce-ux/design-system/scss/index.scss";
@import "../../../node_modules/@salesforce-ux/design-system/scss/design-tokens.scss";

@import "slds-icon-font";
@import "typography";

html {
    color: $color-text-default;
}

.search-form {
    margin: 21px auto;
    max-width: 480px;
    position: relative;

    input[type=search] {
        text-align: center;
        padding-left: 18px;
        padding-right: 18px;
    }
}

.search-form-action {
    margin-top: -.5rem;
    position: absolute;
    top: 50%;
    left: 10px;
}

.search-form-action--right {
    @extend .search-form-action;

    left: inherit;
    right: 9px;
}

.search-form-icon {
    font-size: 1rem;
}

.header-form-size {
    position: absolute;
    right: 1rem;
    top: 18px;
}

.spinny-gif__container {
    margin-left: -34px;
    margin-top: -34px;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1;
    transition: opacity 0.1s ease-in-out;

    &.active {
        opacity: 1;
        z-index: 100;
    }
}

.icon-container {
    margin: .5rem .5rem -39px;
    position: relative;

    .icon {
        display: block;
    }

    &.active {
        .icon-tooltip {
            opacity: 1;
            visibility: visible;
        }
    }
}

.icon {
    font-size: 3rem;
    display: inline-block;
}

.icon-input {
    border: 0;
    border-bottom: 1px solid $color-border-input;
    font-size: .75rem;
    display: inline-block;
    outline: thin;
    padding: .5rem 0;
    min-width: 15rem;
}

.icon-tooltip {
    margin: 0 auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.icon-layout--default {
    .icon {
        padding: .5rem 0;
        position: absolute;
    }

    .icon-input {
        padding-left: 2rem;
        text-align: left;
    }
}

.icon-layout--medium {
    text-align: center;

    .icon {
        position: static;
    }

    .icon-input {
        padding: .5rem 0;
        text-align: center;
    }
}

.icon-layout--large {
    @extend .icon-layout--medium;
}

.icon-layout--xx-large {
    @extend .icon-layout--medium;
}