@use "sass:map";

.vuiButtonSecondary {
  &:hover {
    box-shadow: $shadowSmallEnd;
  }
}

.vuiButtonSecondary--solid {
  background-color: var(--vui-color-empty-shade);
}

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

@each $colorName, $colorValue in $color {
  .vuiButtonSecondary--#{$colorName} {
    border: 1px solid #{map.get($colorValue, "border-color")};
    color: #{map.get($colorValue, "color")};

    &.vuiButtonSecondary-isSelected {
      box-shadow: inset rgba(0, 0, 0, 0.1) 0px 2px 2px;
    }
  }
}