.icon-btn {
  @apply .border .border-porcelain .rounded .text-sm .text-regentGrey;
  transition: all 0.2s;
}

.icon-btn:focus {
  outline: none;
}

.icon-btn:hover:not(:disabled) {
  @apply .border-gauloiseBlue-20 .bg-gauloiseBlue-10 .text-gauloiseBlue-100;
}

.icon-btn:hover svg {
  @apply .text-gauloiseBlue-100;
}

.selected-icon-btn {
  @apply .border-gauloiseBlue-100 .bg-gauloiseBlue-100 .text-cloudWhite;
}

.selected-icon-btn:hover:not(:disabled) {
  @apply .border-gauloiseBlue-100 .bg-gauloiseBlue-100 .text-cloudWhite;
}

.selected-icon-btn:hover svg {
  @apply .text-cloudWhite;
}

.square-icon-btn {
  line-height: 0;
  transition: background 0.2s;
}

.square-icon-btn:focus {
  outline: none;
}

.focus\:shadow-outline-blue:focus {
  box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
}