/**
*   Specific styles for the Tax Rates views
*/
.ui-refresh .grid-view .tax-rate-table .lt-input-rate {
    width: 90px!important;
    background-color: transparent!important;
    border: 1px solid transparent!important;
    border-right: 0!important;
    transition: all var(--transition-fast);
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate:hover {
    box-shadow: none!important;
    border: 1px solid var(--line)!important;
    border-right: 0!important;
    transition: all var(--transition-fast);
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate:focus {
    box-shadow: none!important;
    border: 1px solid var(--accent-primary)!important;
    border-right: 0!important;
    background-color: var(--card)!important;
    transition: all var(--transition-fast);
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate + .input-group-addon label {
    margin-bottom: 0;
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate + .input-group-addon label::after {
    display: none;
}
/* The %-addon otherwise keeps Bootstrap's filled, bordered look, which reads
   as a separate control next to the borderless .lt-input. Match its idle
   state and mirror the same box-shadow ring on the input's hover/focus so
   input + addon read as one control. */
.ui-refresh .grid-view .tax-rate-table .lt-input-rate + .input-group-addon {
    box-shadow: none!important;
    background-color: transparent!important;
    border: 1px solid transparent!important;
    border-left: 0!important;
    transition: all var(--transition-fast);
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate:hover + .input-group-addon {
    border: 1px solid var(--line)!important;
    border-left: 0!important;
}
.ui-refresh .grid-view .tax-rate-table .lt-input-rate:focus + .input-group-addon {
    border: 1px solid var(--accent-primary)!important;
    border-left: 0!important;
    background-color: var(--card)!important;
}

/* Client-side required-field check (tax-rate-list.js): name/display name/
   rate flip to this the moment they're blurred empty, no round trip to the
   server needed to learn the same "required" error. */
.ui-refresh .grid-view .tax-rate-table .lt-input-invalid,
.ui-refresh .grid-view .tax-rate-table .lt-input-invalid:hover,
.ui-refresh .grid-view .tax-rate-table .lt-input-invalid:focus {
    border: 1px solid var(--color-error)!important;
}

.ui-refresh .grid-view .tax-rate-table .lt-input-invalid.lt-input-rate {
    border: 1px solid var(--color-error)!important;
    border-right: 0!important;
}

.ui-refresh .grid-view .tax-rate-table .lt-input-invalid + .input-group-addon,
.ui-refresh .grid-view .tax-rate-table .lt-input-invalid:hover + .input-group-addon,
.ui-refresh .grid-view .tax-rate-table .lt-input-invalid:focus + .input-group-addon {
    border: 1px solid var(--color-error)!important;
    border-left: 0!important;
}