@use '../global/common' as global;

/* ------------------------------
 Rich Select
------------------------------- */
.acms-rich-select,
.acms-rich-select-menu-portal {
  --acms-rich-select-font-size: #{global.$acms-form-select-font-size}px;
  --acms-rich-select-height: #{global.$acms-form-height-sp};
  --acms-rich-select-color: #{global.$acms-color-black};
  --acms-rich-select-disabled-color: #{global.$acms-form-disabled-text-color};
  --acms-rich-select-bg-color: #{global.$acms-color-gray10};
  --acms-rich-select-disabled-bg-color: #{global.$acms-form-disabled-bg-color};
  --acms-rich-select-open-bg-color: #{global.$acms-color-white};
  --acms-rich-select-border: #{global.$acms-form-border};
  --acms-rich-select-border-radius: #{global.$acms-form-border-radius};
  --acms-rich-select-open-border-color: #b3b3b3 #ccc #d9d9d9;
  --acms-rich-select-hover-border-color: #{global.$acms-form-hover-border-color};
  --acms-rich-select-focused-border-color: #{global.$acms-form-focus-border-color};
  --acms-rich-select-disabled-border-color: #{global.$acms-form-disabled-border-color};
  --acms-rich-select-box-shadow: #{global.$acms-form-box-shadow};
  --acms-rich-select-focused-box-shadow: #{global.$acms-form-focus-box-shadow, global.$acms-form-box-shadow};
  --acms-rich-select-placeholder-color: #{global.$acms-color-gray70};
  --acms-rich-select-menu-bg-color: #{global.$acms-color-white};
  --acms-rich-select-menu-border-color: #{global.$acms-color-gray60};
  --acms-rich-select-option-color: #666;
  --acms-rich-select-option-selected-color: #{global.$acms-color-black};
  --acms-rich-select-option-focused-color: #{global.$acms-color-black};
  --acms-rich-select-option-bg-color: #{global.$acms-color-white};
  --acms-rich-select-option-focused-bg-color: #ebf5ff;
  --acms-rich-select-option-selected-bg-color: #f5faff;
  --acms-rich-select-multi-value-font-size: 14px;
  --acms-rich-select-multi-value-color: #{global.$acms-color-gray90};
  --acms-rich-select-multi-value-bg-color: #{global.$acms-color-gray30};
  --acms-rich-select-multi-value-border-color: #{global.$acms-color-gray60};
  --acms-rich-select-no-options-color: #666;
  --acms-rich-select-loading-color: #666;
  --acms-rich-select-menu-z-index: #{global.zIndex(rich-select-menu)};

  @media (min-width: global.$breakpoint-md-min) {
    --acms-rich-select-font-size: #{global.$acms-form-select-font-size-desktop}px;
    --acms-rich-select-height: #{global.$acms-form-height};
  }
}
