/* Web Component Style Overrides
 * This file contains CSS overrides for web components to prevent
 * global form styles from interfering with component styling.
 */

/* Brand Selector Container - Match form control styling */
[accel-test-id="multivariate-brand-selector-input-container"] {
  border-radius: 3px !important;
  font-size: 14px;
  border-width: 1px 1px 1px 1px;
  border-color: #aaa;
  border-style: solid;
}

[accel-test-id="multivariate-brand-selector-input-container"]:hover {
  border: 1px solid #333;
}

[accel-test-id="multivariate-brand-selector-input-container"]:focus-within {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* Searchable Multi Select Component Overrides */
accel-searchable-multi-select-wc input,
accel-searchable-multi-select-wc input[data-web-component] {
  border: none;
}

accel-searchable-multi-select-wc input:hover,
accel-searchable-multi-select-wc input:focus,
accel-searchable-multi-select-wc input[data-web-component]:hover,
accel-searchable-multi-select-wc input[data-web-component]:focus {
  border: none;
}