.el-button {
  display: inline-block;
  padding: 0 0.8em;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  height: initial;
  font-size: 1em;
  line-height: 2em;
  white-space: nowrap;
  cursor: pointer;
  z-index: 0;
  text-shadow: none;
  border: 1px solid var(--color-surface-border);
  color: var(--color-text-secondary);
  background-color: var(--color-control-ready);
  border-radius: 3px;

  &:hover {
    color: var(--color-text-primary);
    background-color: color-mix(in srgb, #fff 20%, var(--color-control-ready));
  }

  &:focus {
    outline: none;
    border-color: #ef53e6;
    box-shadow: 0 0 0 1px #ef53e6;
  }

  &:active {
    border-color: #974A9E;
    box-shadow: 0 0 0 1px #974A9E;
    background-color: color-mix(in srgb, #000 4%, var(--color-control-ready));
  }
}

.el-button-icon {
  line-height: 1;
  padding: 0;

  &:focus {
    el-icon {
      color: #ef53e6;
    }
  }
}

[data-color-scheme=dark] {
  .el-button {
    &:hover {
      background-color: color-mix(in srgb, #fff 4%, var(--color-control-ready));
    }

    &:active {
      background-color: color-mix(in srgb, #000 4%, var(--color-control-ready));
    }
  }
}