<template>
  <button class="baseSelectClearButton" type="button">
    <cp-icon size="16" type="x" />
  </button>
</template>

<script setup lang="ts">
import CpIcon from '@/components/CpIcon.vue'
</script>

<style lang="scss">
.baseSelectClearButton {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--cp-dimensions-3_5);
  display: flex;
  width: var(--cp-dimensions-6);
  height: var(--cp-dimensions-6);
  justify-content: center;
  padding: var(--cp-dimensions-1);
  border-radius: var(--cp-radius-full);
  background-color: transparent;
  color: var(--cp-foreground-secondary);
  cursor: pointer;
  transform: translateY(-50%);

  &:hover {
    background-color: var(--cp-background-primary-hover);
    color: var(--cp-foreground-secondary-hover);
  }

  &:focus {
    outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
    outline-offset: var(--cp-dimensions-0_25);
  }
}
</style>
