/**
 * Default
 */
/**
 * Primary
 */
/**
 * Gray Dark
 */
/**
 * Danger
 */
/**
 * Icon
 */
:host {
  display: inline-block;
  vertical-align: middle;
}

.button {
  position: relative;
  font-family: sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 36px;
  padding: 0 15px;
  appearance: none;
  border: 0;
  border-radius: var(--as-button-border-radius, 3px);
  outline: 0;
  cursor: pointer;
  z-index: 0;
}
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: transparent;
  border-radius: 3px;
  transition: opacity 160ms ease, background-color 90ms ease;
  z-index: -1;
}

.button[disabled] {
  color: gray;
  background-color: #f3f3f3;
  cursor: default;
}

/**
 * Variante default
 */
.button {
  --as-spinner-color: rgba(0, 0, 0, 0.47);
  background-color: #eee;
}

.button:not([disabled]):hover::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.button:not([disabled]):focus::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.24);
}

/**
 * Variante primary
 */
.button-primary {
  --as-spinner-color: white;
  color: #fff;
  background-color: #4a7729;
}

.button-primary:not([disabled]):hover::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.button-primary:not([disabled]):focus::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.24);
}

/**
 * Variante gray dark
 */
.button-gray-dark {
  color: #fff;
  background-color: #999;
}

.button-primary:not([disabled]):hover::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.button-primary:not([disabled]):focus::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.24);
}

/**
 * Variante danger
 */
.button-danger {
  --as-spinner-color: white;
  color: #fff;
  background-color: #e43e23;
}

.button-danger:not([disabled]):hover::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.button-danger:not([disabled]):focus::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.24);
}

/**
 * Variante icon
 */
.button-icon {
  width: inherit;
  height: inherit;
  padding: 3px;
  color: var(--as-button-icon-color, rgba(0, 0, 0, 0.67));
  background-color: var(--as-button-icon-fill-color, transparent);
  border-radius: var(--as-button-icon-border-radius, 100%);
}
.button-icon::before {
  border-radius: inherit;
}

.button-icon:not([disabled]):hover::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

.button-icon:not([disabled]):focus::before {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.24);
}