:host {
  display: flex;
}

button {
  background: transparent;
  color: #2d2d2d;
  fill: #2d2d2d;
  padding: 5px 8px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-transform: capitalize;
  font-style: normal;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

/* Varients */
.outline {
  background: #fff;
  color: #1a5059;
  fill: #1a5059;
  border-color: #cdcdcd;
}

.filled {
  background-color: #f3f3f3;
  border-color: #cdcdcd;
}

/* Varients End */
/* Colors */
.filled.action {
  background: #1a5059;
  border-color: #1a5059;
  color: #fff;
  fill: #fff;
}

.filled.primary {
  color: #2d2d2d;
  fill: #2d2d2d;
}

.filled.player {
  background: #0095ff;
  border-color: #0095ff;
  fill: #fff;
}

/* Colors End */
/* Hover */
.filled.action:hover,
.filled.action.hover {
  background: #003c46;
  border-color: #003c46;
}

.outline.action:hover,
.outline.action.hover {
  background: #e5e5e5;
  border-color: #cdcdcd;
}

.filled.primary:hover,
.filled.primary.hover {
  background: #e5e5e5;
  border-color: #cdcdcd;
}

.filled.player:hover,
.filled.player.hover {
  background: #0095ff;
  border-color: #0095ff;
}

.ghost:hover,
.ghost.hover {
  background: #e5e5e5;
  border-color: #e5e5e5;
}

/* End hover */
/* active */
.filled.action:active,
.filled.action.active {
  background: #1a5059;
  border-color: #1a5059;
}

.outline.action:active,
.outline.action.active {
  background: #e5ebec;
  border-color: #cdcdcd;
}

.filled.primary:active,
.filled.primary.active {
  background: #e5ebec;
  border-color: #cdcdcd;
}

.filled.player:active,
.filled.player.active {
  background: #1a5059;
  border-color: #1a5059;
}

.ghost:active,
.ghost.active {
  background: #e5ebec;
  border-color: #e5ebec;
}

/* End active */
/* focus */
button:focus,
button.focus {
  outline: 3px solid #0096ff;
  outline-offset: 2px;
}

.filled.action:focus,
.filled.action.focus {
  background: #003c46;
  border-color: #003c46;
}

.outline.action:focus,
.outline.action.focus,
.outline.primary:focus,
.outline.primary.focus {
  background: #e5e5e5;
  border-color: #cdcdcd;
}

.ghost:focus,
.ghost.focus {
  background: #e5e5e5;
  border-color: #e5e5e5;
}

/* End focus */
/* Disabled */
button:disabled,
.filled:disabled {
  background: #e5e5e5;
  pointer-events: none;
  color: #aeaeae;
  fill: #aeaeae;
  border-color: #e5e5e5;
}

pe-icon {
  fill: inherit;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

pe-icon.icon-only {
  margin-right: 0;
}

.circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

button.large::part(icon) {
  width: 24px;
  height: 24px;
}
button.circle pe-icon {
  width: 24px;
  height: 24px;
  margin-right: 0;
}

button.circle::part(icon),
.large {
  padding: 8px 12px;
  height: 40px;
}

button.large::part(icon) {
  width: 24px;
  height: 24px;
}

button:disabled {
  background: #e5e5e5;
  pointer-events: none;
  color: #aeaeae;
  fill: #aeaeae;
  border-color: #e5e5e5;
}