.bui-icon-btn {
  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
  --icon-size: var(--bui-icon-btn-font-size, 17px);
  --user-area: var(--bui-icon-btn-padding, 5px);
  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
  position: relative;
  display: inline-flex;
  height: auto;
  margin: 0;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--color);
  cursor: pointer;
  font-family: var(--bui-font-family);
  font-size: var(--icon-size);
  padding: var(--user-area);
}
.bui-icon-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--bui-color-black);
  border: inherit;
  border-color: var(--bui-color-black);
  border-radius: inherit;
  transform: translate(-50%, -50%);
  opacity: 0;
  content: " ";
}
.bui-icon-btn:active::before {
  opacity: 0.04;
}
.bui-icon-btn::after {
  border: 0;
}
.bui-icon-btn-small {
  font-size: var(--bui-text-size-4);
  padding: var(--bui-spacing-xs);
}
.bui-icon-btn-small.bui-icon-btn-outlined,
.bui-icon-btn-small.bui-icon-btn-contained {
  padding: var(--bui-spacing-xs);
}
.bui-icon-btn-medium.bui-icon-btn-outlined,
.bui-icon-btn-medium.bui-icon-btn-contained {
  padding: var(--user-area);
}
.bui-icon-btn-large {
  font-size: var(--large-font-size);
  padding: var(--bui-spacing-sm);
}
.bui-icon-btn-large.bui-icon-btn-outlined,
.bui-icon-btn-large.bui-icon-btn-contained {
  padding: var(--bui-spacing-sm);
}
.bui-icon-btn-disabled {
  pointer-events: none;
  opacity: var(--disabled-opacity);
}
.bui-icon-btn-circular {
  border-radius: 100%;
}
.bui-icon-btn-rounded {
  border-radius: var(--bui-shape-radius-default);
}
.bui-icon-btn-square {
  border-radius: 0;
}
.bui-icon-btn-default.bui-icon-btn-primary {
  color: var(--bui-color-primary);
}
.bui-icon-btn-default.bui-icon-btn-success {
  color: var(--bui-color-success);
}
.bui-icon-btn-default.bui-icon-btn-info {
  color: var(--bui-color-info);
}
.bui-icon-btn-default.bui-icon-btn-warning {
  color: var(--bui-color-warning);
}
.bui-icon-btn-outlined {
  border: solid 1px;
}
.bui-icon-btn-outlined.bui-icon-btn-primary {
  color: var(--bui-color-primary);
  border-color: var(--bui-color-primary);
}
.bui-icon-btn-outlined.bui-icon-btn-success {
  color: var(--bui-color-success);
  border-color: var(--bui-color-success);
}
.bui-icon-btn-outlined.bui-icon-btn-info {
  color: var(--bui-color-info);
  border-color: var(--bui-color-info);
}
.bui-icon-btn-outlined.bui-icon-btn-warning {
  color: var(--bui-color-warning);
  border-color: var(--bui-color-warning);
}
.bui-icon-btn-outlined.bui-icon-btn-danger {
  color: var(--bui-color-danger);
  border-color: var(--bui-color-danger);
}
.bui-icon-btn-contained {
  background-color: var(--bg-color);
}
.bui-icon-btn-contained.bui-icon-btn-primary {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-primary-start) 0%,
      var(--bui-color-primary-end) 100%);
}
.bui-icon-btn-contained.bui-icon-btn-success {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-success-start) 0%,
      var(--bui-color-success-end) 100%);
}
.bui-icon-btn-contained.bui-icon-btn-info {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-info-start) 0%,
      var(--bui-color-info-end) 100%);
}
.bui-icon-btn-contained.bui-icon-btn-warning {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-warning-start) 0%,
      var(--bui-color-warning-end) 100%);
}
.bui-icon-btn-contained.bui-icon-btn-danger {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-danger-start) 0%,
      var(--bui-color-danger-end) 100%);
}