@use "sass:map";

.vuiIconButton {
  display: inline-block;
  border-radius: $sizeXxs;
  padding: $sizeXxs;
  line-height: 0; // Ensure icon sits in the center.
}

// Color
$color: (
  accent: (
    "color": var(--vui-color-accent-shade-rgb),
    "background-color": var(--vui-color-accent-shade-rgb)
  ),
  primary: (
    "color": var(--vui-color-primary-shade-rgb),
    "background-color": var(--vui-color-primary-shade-rgb)
  ),
  success: (
    "color": var(--vui-color-success-shade-rgb),
    "background-color": var(--vui-color-success-shade-rgb)
  ),
  danger: (
    "color": var(--vui-color-danger-shade-rgb),
    "background-color": var(--vui-color-danger-shade-rgb)
  ),
  warning: (
    "color": var(--vui-color-warning-shade-rgb),
    "background-color": var(--vui-color-warning-shade-rgb)
  ),
  neutral: (
    "color": var(--vui-color-darker-shade-rgb),
    "background-color": var(--vui-color-subdued-shade-rgb)
  ),
  subdued: (
    "color": var(--vui-color-subdued-shade-rgb),
    "background-color": var(--vui-color-subdued-shade-rgb)
  )
);

@each $colorName, $colorValue in $color {
  .vuiIconButton--#{$colorName} {
    color: rgb(#{map.get($colorValue, "color")});
    background-color: rgba(#{map.get($colorValue, "background-color")}, 0);

    &:hover {
      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
    }

    &-isSelected {
      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
    }
  }
}

.vuiIconButton-isDisabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}

// Size
.vuiIconButton--xs {
  padding: $sizeXxs;
  height: 24px;
}

.vuiIconButton--s {
  padding: $sizeXs * 0.75;
  height: 28px;
}

.vuiIconButton--m {
  padding: $sizeXs;
  height: 34px;
}