@charset 'UTF-8';

/**
* reset
**/
body {
  margin: 0;
}

/**
* common
**/
.selectmenu-inner {
  margin: 0 0 10px;
}

/**
* my-select-memu
**/
.my-select-menu::part(button) {
  color: white;
  background-color: #f00;
  padding: 5px;
  border-radius: 5px;
}
.my-select-menu::part(listbox) {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid red;
  border-radius: 5px;
}

/**
* my-custom-select
**/
.my-custom-select [slot='button'] {
  display: flex;
  align-content: center;
}
.my-custom-select button {
  padding: 5px;
  border: none;
  background: #f06;
  border-radius: 5px 0 0 5px;
  color: white;
  font-weight: bold;
}
.my-custom-select .label {
  padding: 5px;
  border: 1px solid #f06;
  border-radius: 0 5px 5px 0;
}

/**
* my-custom-select_2
**/
.my-custom-select_2 [popup] {
  width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  padding: 10px;
  box-shadow: none;
  margin: 10px 0;
  border: 1px solid;
  background: #f7f7f7;
}

/**
* my-custom-select_3
**/
.my-custom-select_3 [slot='button'] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.my-custom-select_3 button {
  border: none;
  margin: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
}
.my-custom-select_3 button::before {
  content: '\25BC';
}
.my-custom-select_3 [popup] {
  padding: 0;
}
.my-custom-select_3 .section {
  padding: 1rem 0 0;
  background: radial-gradient(ellipse 60% 50px at center top, #000a 0%, transparent 130%);
}
.my-custom-select_3 h3 {
  margin: 0 0 1rem 0;
  text-align: center;
  color: white;
}
.my-custom-select_3 option {
  text-align: center;
  padding: 0.5rem;
}