MaxMilton/ekscss

/**
 * BUTTONS
 */

// Buttons should look correct on <button>, <a>, <div>, etc.

// Note: Also update 'packages/framework/addon/native.xcss' if making any
// changes to the nested selectors
.button {
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
  padding: ${x.button.paddingY} ${x.button.paddingX};
  border: ${x.button.border};
  border-radius: ${x.button.radius};
  color: ${x.button.textColor};
  font-weight: ${x.button.textWeight};
  text-align: center;
  text-decoration: none;
  background-color: ${x.button.backgroundColor};
  user-select: none;

  &:hover {
    z-index: 3;
    border-color: ${x.button.hoverBorderColor};
    text-decoration: none;
    box-shadow: 0 0 0 ${x.button.outlineSize} ${x.button.hoverBorderColor};
    outline: none;
  }

  &:focus,
  &:active {
    z-index: 2;
    border-color: ${x.button.activeBorderColor};
    text-decoration: none;
    box-shadow: 0 0 0 ${x.button.outlineSize} ${x.button.activeBorderColor};
    outline: none;
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled {
    z-index: auto;
    border-color: ${x.button.disabledBorder};
    color: ${x.button.disabledTextColor};
    background-color: ${x.button.disabledBackgroundColor};
    box-shadow: none;
  }
}

/* Remove browser default \`<button>\` styles */

.button-clear {
  border-color: transparent;
  background: transparent;

  &:hover,
  &:focus {
    // prevent change when applied to links
    color: unset;
  }
}

/* Same whitespace as a button for other elements like anchors (links) */

.link-button {
  display: inline-block;
  margin: 0;
  padding: ${x.button.paddingY} ${x.button.paddingX};
}

/* Combined button groups */

.button-group {
  // ensure equal height
  display: flex;

  & > .button {
    border-radius: 0;

    & + .button {
      margin-left: -1px;
    }

    &:first-of-type {
      border-top-left-radius: ${x.button.radius};
      border-bottom-left-radius: ${x.button.radius};
    }

    &:last-of-type {
      border-top-right-radius: ${x.button.radius};
      border-bottom-right-radius: ${x.button.radius};
    }
  }
}