@use "sass:map";

.vuiButtonTertiary {
  padding-left: $sizeXs;
  padding-right: $sizeXs;

  &:hover {
    text-decoration: underline;
  }
}

.vuiButtonTertiary-noPadding {
  padding: 0;
}

// Color
$color: (
  accent: (
    "color": var(--vui-color-accent-shade),
    "selected-color": rgba(var(--vui-color-accent-shade-rgb), 0.1)
  ),
  primary: (
    "color": var(--vui-color-primary-shade),
    "selected-color": rgba(var(--vui-color-primary-shade-rgb), 0.1)
  ),
  success: (
    "color": var(--vui-color-success-shade),
    "selected-color": rgba(var(--vui-color-success-shade-rgb), 0.1)
  ),
  danger: (
    "color": var(--vui-color-danger-shade),
    "selected-color": rgba(var(--vui-color-danger-shade-rgb), 0.1)
  ),
  warning: (
    "color": var(--vui-color-warning-shade),
    "selected-color": rgba(var(--vui-color-warning-shade-rgb), 0.1)
  ),
  neutral: (
    "color": var(--vui-color-text),
    "selected-color": rgba(var(--vui-color-text-rgb), 0.1)
  ),
  subdued: (
    "color": var(--vui-color-subdued-shade),
    "selected-color": rgba(var(--vui-color-subdued-rgb), 0.1)
  )
);

@each $colorName, $colorValue in $color {
  .vuiButtonTertiary--#{$colorName} {
    color: #{map.get($colorValue, "color")};

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