:host {
  /**
   * @prop --klevu-dropdown-padding calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)): Padding around dropdown
   */
  --padding: var(--klevu-dropdown-padding, calc(var(--klevu-size-m) - (var(--klevu-body-s-size) / 2)));
  display: block;
}

select {
  font-size: var(--klevu-body-s-size);
  font-weight: var(--klevu-body-s-weight);
  appearance: none;
  width: 100%;
  min-width: 80px;
  border: none;
  border-radius: var(--klevu-border-radius-m);
  height: calc(var(--klevu-size-m) * 2);
  padding: 0 var(--padding);
  padding-right: 30px;
}

.selectcontainer {
  position: relative;
  display: flex;
  border: 1px solid transparent;
}

.selectcontainer.inline {
  display: inline-block;
}

.selectcontainer.inline select {
  width: auto;
}

.selectcontainer.default {
  border: 1px solid var(--klevu-color-neutral-4);
  border-radius: var(--klevu-border-radius-m);
}

select:focus {
  outline: 0;
}

.selectcontainer:has(select:active, select:focus) {
  border: 1px solid var(--klevu-color-primary);
}

.triangle {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  font-size: 20px;
  height: 24px;
  width: 24px;
  pointer-events: none;
}

.selectcontainer.disabled {
  cursor: not-allowed;
}

.selectcontainer.disabled select {
  cursor: not-allowed;
}

.selectcontainer.disabled .triangle {
  background-color: var(--klevu-color-neutral-4);
}