.okui-btn {
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 500;
  justify-content: center;
  outline: none;
  position: relative;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.okui-btn:focus-visible {
  outline: 2px solid var(--okd-color-border-focus);
  outline-color: var(--okd-color-border-focus);
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px;
}
.okui-btn.btn-fill-highlight {
  background: var(--okd-button-fill-highlight-default-background);
  border-color: var(--okd-button-fill-highlight-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-highlight-border-size);
  box-shadow: var(--okd-button-fill-highlight-default-shadow);
  color: var(--okd-button-fill-highlight-default-font-color);
}
.okui-btn.btn-fill-highlight.hover,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-highlight-hover-background);
  border-color: var(--okd-button-fill-highlight-hover-border-color);
  box-shadow: var(--okd-button-fill-highlight-hover-shadow);
  color: var(--okd-button-fill-highlight-hover-font-color);
}
.okui-btn.btn-fill-highlight.hover .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-highlight-hover-icon-color);
}
.okui-btn.btn-fill-highlight.active,
.okui-btn.btn-fill-highlight:not(:disabled):active {
  background: var(--okd-button-fill-highlight-active-background);
  border-color: var(--okd-button-fill-highlight-active-border-color);
  box-shadow: var(--okd-button-fill-highlight-active-shadow);
  color: var(--okd-button-fill-highlight-active-font-color);
}
.okui-btn.btn-fill-highlight.active .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-highlight-active-icon-color);
}
.okui-btn.btn-fill-highlight:not(.loading).btn-disabled,
.okui-btn.btn-fill-highlight:not(.loading):disabled {
  background: var(--okd-button-fill-highlight-disabled-background);
  border-color: var(--okd-button-fill-highlight-disabled-border-color);
  box-shadow: var(--okd-button-fill-highlight-disabled-shadow);
  color: var(--okd-button-fill-highlight-disabled-font-color);
}
.okui-btn.btn-fill-highlight:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-highlight:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-highlight-disabled-icon-color);
}
.okui-btn.btn-fill-highlight.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-highlight .btn-icon {
  color: var(--okd-button-fill-highlight-default-icon-color);
}
.okui-btn.btn-fill-highlight .okui-btn-loader-text {
  color: var(--okd-button-fill-highlight-default-font-color);
}
.okui-btn.btn-fill-highlight.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-highlight.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-highlight-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-highlight-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-highlight-border-size) * 2
  );
}
.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary {
  background: var(--okd-button-fill-primary-default-background);
  border-color: var(--okd-button-fill-primary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-primary-border-size);
  box-shadow: var(--okd-button-fill-primary-default-shadow);
  color: var(--okd-button-fill-primary-default-font-color);
}
.okui-btn.btn-fill-primary.hover,
.okui-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-primary-hover-background);
  border-color: var(--okd-button-fill-primary-hover-border-color);
  box-shadow: var(--okd-button-fill-primary-hover-shadow);
  color: var(--okd-button-fill-primary-hover-font-color);
}
.okui-btn.btn-fill-primary.hover .btn-icon,
.okui-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-primary-hover-icon-color);
}
.okui-btn.btn-fill-primary.active,
.okui-btn.btn-fill-primary:not(:disabled):active {
  background: var(--okd-button-fill-primary-active-background);
  border-color: var(--okd-button-fill-primary-active-border-color);
  box-shadow: var(--okd-button-fill-primary-active-shadow);
  color: var(--okd-button-fill-primary-active-font-color);
}
.okui-btn.btn-fill-primary.active .btn-icon,
.okui-btn.btn-fill-primary:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-primary-active-icon-color);
}
.okui-btn.btn-fill-primary:not(.loading).btn-disabled,
.okui-btn.btn-fill-primary:not(.loading):disabled {
  background: var(--okd-button-fill-primary-disabled-background);
  border-color: var(--okd-button-fill-primary-disabled-border-color);
  box-shadow: var(--okd-button-fill-primary-disabled-shadow);
  color: var(--okd-button-fill-primary-disabled-font-color);
}
.okui-btn.btn-fill-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-primary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-primary-disabled-icon-color);
}
.okui-btn.btn-fill-primary.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-primary .btn-icon {
  color: var(--okd-button-fill-primary-default-icon-color);
}
.okui-btn.btn-fill-primary .okui-btn-loader-text {
  color: var(--okd-button-fill-primary-default-font-color);
}
.okui-btn.btn-fill-primary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-primary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-primary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-primary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-primary-border-size) * 2
  );
}
.okui-btn.btn-fill-primary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary {
  background: var(--okd-button-fill-secondary-default-background);
  border-color: var(--okd-button-fill-secondary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-secondary-border-size);
  box-shadow: var(--okd-button-fill-secondary-default-shadow);
  color: var(--okd-button-fill-secondary-default-font-color);
}
.okui-btn.btn-fill-secondary.hover,
.okui-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-secondary-hover-background);
  border-color: var(--okd-button-fill-secondary-hover-border-color);
  box-shadow: var(--okd-button-fill-secondary-hover-shadow);
  color: var(--okd-button-fill-secondary-hover-font-color);
}
.okui-btn.btn-fill-secondary.hover .btn-icon,
.okui-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-secondary-hover-icon-color);
}
.okui-btn.btn-fill-secondary.active,
.okui-btn.btn-fill-secondary:not(:disabled):active {
  background: var(--okd-button-fill-secondary-active-background);
  border-color: var(--okd-button-fill-secondary-active-border-color);
  box-shadow: var(--okd-button-fill-secondary-active-shadow);
  color: var(--okd-button-fill-secondary-active-font-color);
}
.okui-btn.btn-fill-secondary.active .btn-icon,
.okui-btn.btn-fill-secondary:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-secondary-active-icon-color);
}
.okui-btn.btn-fill-secondary:not(.loading).btn-disabled,
.okui-btn.btn-fill-secondary:not(.loading):disabled {
  background: var(--okd-button-fill-secondary-disabled-background);
  border-color: var(--okd-button-fill-secondary-disabled-border-color);
  box-shadow: var(--okd-button-fill-secondary-disabled-shadow);
  color: var(--okd-button-fill-secondary-disabled-font-color);
}
.okui-btn.btn-fill-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-secondary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-secondary-disabled-icon-color);
}
.okui-btn.btn-fill-secondary.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-secondary .btn-icon {
  color: var(--okd-button-fill-secondary-default-icon-color);
}
.okui-btn.btn-fill-secondary .okui-btn-loader-text {
  color: var(--okd-button-fill-secondary-default-font-color);
}
.okui-btn.btn-fill-secondary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-secondary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-secondary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-secondary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-secondary-border-size) * 2
  );
}
.okui-btn.btn-fill-secondary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary {
  background: var(--okd-button-fill-tertiary-default-background);
  border-color: var(--okd-button-fill-tertiary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-tertiary-border-size);
  box-shadow: var(--okd-button-fill-tertiary-default-shadow);
  color: var(--okd-button-fill-tertiary-default-font-color);
}
.okui-btn.btn-fill-tertiary.hover,
.okui-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-tertiary-hover-background);
  border-color: var(--okd-button-fill-tertiary-hover-border-color);
  box-shadow: var(--okd-button-fill-tertiary-hover-shadow);
  color: var(--okd-button-fill-tertiary-hover-font-color);
}
.okui-btn.btn-fill-tertiary.hover .btn-icon,
.okui-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-tertiary-hover-icon-color);
}
.okui-btn.btn-fill-tertiary.active,
.okui-btn.btn-fill-tertiary:not(:disabled):active {
  background: var(--okd-button-fill-tertiary-active-background);
  border-color: var(--okd-button-fill-tertiary-active-border-color);
  box-shadow: var(--okd-button-fill-tertiary-active-shadow);
  color: var(--okd-button-fill-tertiary-active-font-color);
}
.okui-btn.btn-fill-tertiary.active .btn-icon,
.okui-btn.btn-fill-tertiary:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-tertiary-active-icon-color);
}
.okui-btn.btn-fill-tertiary:not(.loading).btn-disabled,
.okui-btn.btn-fill-tertiary:not(.loading):disabled {
  background: var(--okd-button-fill-tertiary-disabled-background);
  border-color: var(--okd-button-fill-tertiary-disabled-border-color);
  box-shadow: var(--okd-button-fill-tertiary-disabled-shadow);
  color: var(--okd-button-fill-tertiary-disabled-font-color);
}
.okui-btn.btn-fill-tertiary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-tertiary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-tertiary-disabled-icon-color);
}
.okui-btn.btn-fill-tertiary.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-tertiary .btn-icon {
  color: var(--okd-button-fill-tertiary-default-icon-color);
}
.okui-btn.btn-fill-tertiary .okui-btn-loader-text {
  color: var(--okd-button-fill-tertiary-default-font-color);
}
.okui-btn.btn-fill-tertiary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-tertiary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-tertiary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-tertiary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-tertiary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-tertiary-border-size) * 2
  );
}
.okui-btn.btn-fill-tertiary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary {
  background: var(--okd-button-fill-quaternary-default-background);
  border-color: var(--okd-button-fill-quaternary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-quaternary-border-size);
  box-shadow: var(--okd-button-fill-quaternary-default-shadow);
  color: var(--okd-button-fill-quaternary-default-font-color);
}
.okui-btn.btn-fill-quaternary.hover,
.okui-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-quaternary-hover-background);
  border-color: var(--okd-button-fill-quaternary-hover-border-color);
  box-shadow: var(--okd-button-fill-quaternary-hover-shadow);
  color: var(--okd-button-fill-quaternary-hover-font-color);
}
.okui-btn.btn-fill-quaternary.hover .btn-icon,
.okui-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-quaternary-hover-icon-color);
}
.okui-btn.btn-fill-quaternary.active,
.okui-btn.btn-fill-quaternary:not(:disabled):active {
  background: var(--okd-button-fill-quaternary-active-background);
  border-color: var(--okd-button-fill-quaternary-active-border-color);
  box-shadow: var(--okd-button-fill-quaternary-active-shadow);
  color: var(--okd-button-fill-quaternary-active-font-color);
}
.okui-btn.btn-fill-quaternary.active .btn-icon,
.okui-btn.btn-fill-quaternary:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-quaternary-active-icon-color);
}
.okui-btn.btn-fill-quaternary:not(.loading).btn-disabled,
.okui-btn.btn-fill-quaternary:not(.loading):disabled {
  background: var(--okd-button-fill-quaternary-disabled-background);
  border-color: var(--okd-button-fill-quaternary-disabled-border-color);
  box-shadow: var(--okd-button-fill-quaternary-disabled-shadow);
  color: var(--okd-button-fill-quaternary-disabled-font-color);
}
.okui-btn.btn-fill-quaternary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-quaternary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-quaternary-disabled-icon-color);
}
.okui-btn.btn-fill-quaternary.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-quaternary .btn-icon {
  color: var(--okd-button-fill-quaternary-default-icon-color);
}
.okui-btn.btn-fill-quaternary .okui-btn-loader-text {
  color: var(--okd-button-fill-quaternary-default-font-color);
}
.okui-btn.btn-fill-quaternary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-quaternary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-quaternary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-quaternary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-quaternary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-quaternary-border-size) * 2
  );
}
.okui-btn.btn-fill-quaternary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red {
  background: var(--okd-button-fill-red-default-background);
  border-color: var(--okd-button-fill-red-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-red-border-size);
  box-shadow: var(--okd-button-fill-red-default-shadow);
  color: var(--okd-button-fill-red-default-font-color);
}
.okui-btn.btn-fill-red.hover,
.okui-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-red-hover-background);
  border-color: var(--okd-button-fill-red-hover-border-color);
  box-shadow: var(--okd-button-fill-red-hover-shadow);
  color: var(--okd-button-fill-red-hover-font-color);
}
.okui-btn.btn-fill-red.hover .btn-icon,
.okui-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-red-hover-icon-color);
}
.okui-btn.btn-fill-red.active,
.okui-btn.btn-fill-red:not(:disabled):active {
  background: var(--okd-button-fill-red-active-background);
  border-color: var(--okd-button-fill-red-active-border-color);
  box-shadow: var(--okd-button-fill-red-active-shadow);
  color: var(--okd-button-fill-red-active-font-color);
}
.okui-btn.btn-fill-red.active .btn-icon,
.okui-btn.btn-fill-red:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-red-active-icon-color);
}
.okui-btn.btn-fill-red:not(.loading).btn-disabled,
.okui-btn.btn-fill-red:not(.loading):disabled {
  background: var(--okd-button-fill-red-disabled-background);
  border-color: var(--okd-button-fill-red-disabled-border-color);
  box-shadow: var(--okd-button-fill-red-disabled-shadow);
  color: var(--okd-button-fill-red-disabled-font-color);
}
.okui-btn.btn-fill-red:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-red:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-red-disabled-icon-color);
}
.okui-btn.btn-fill-red.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-red .btn-icon {
  color: var(--okd-button-fill-red-default-icon-color);
}
.okui-btn.btn-fill-red .okui-btn-loader-text {
  color: var(--okd-button-fill-red-default-font-color);
}
.okui-btn.btn-fill-red.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xxs-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xxs-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-red.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-red-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-red.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-red-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-fill-red-border-size) *
      2
  );
}
.okui-btn.btn-fill-red.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green {
  background: var(--okd-button-fill-green-default-background);
  border-color: var(--okd-button-fill-green-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-green-border-size);
  box-shadow: var(--okd-button-fill-green-default-shadow);
  color: var(--okd-button-fill-green-default-font-color);
}
.okui-btn.btn-fill-green.hover,
.okui-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-green-hover-background);
  border-color: var(--okd-button-fill-green-hover-border-color);
  box-shadow: var(--okd-button-fill-green-hover-shadow);
  color: var(--okd-button-fill-green-hover-font-color);
}
.okui-btn.btn-fill-green.hover .btn-icon,
.okui-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-green-hover-icon-color);
}
.okui-btn.btn-fill-green.active,
.okui-btn.btn-fill-green:not(:disabled):active {
  background: var(--okd-button-fill-green-active-background);
  border-color: var(--okd-button-fill-green-active-border-color);
  box-shadow: var(--okd-button-fill-green-active-shadow);
  color: var(--okd-button-fill-green-active-font-color);
}
.okui-btn.btn-fill-green.active .btn-icon,
.okui-btn.btn-fill-green:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-green-active-icon-color);
}
.okui-btn.btn-fill-green:not(.loading).btn-disabled,
.okui-btn.btn-fill-green:not(.loading):disabled {
  background: var(--okd-button-fill-green-disabled-background);
  border-color: var(--okd-button-fill-green-disabled-border-color);
  box-shadow: var(--okd-button-fill-green-disabled-shadow);
  color: var(--okd-button-fill-green-disabled-font-color);
}
.okui-btn.btn-fill-green:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-green:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-green-disabled-icon-color);
}
.okui-btn.btn-fill-green.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-green .btn-icon {
  color: var(--okd-button-fill-green-default-icon-color);
}
.okui-btn.btn-fill-green .okui-btn-loader-text {
  color: var(--okd-button-fill-green-default-font-color);
}
.okui-btn.btn-fill-green.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-green-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-green-border-size) *
      2
  );
}
.okui-btn.btn-fill-green.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-green.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-green-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-green.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-green-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-fill-green-border-size) * 2
  );
}
.okui-btn.btn-fill-green.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey {
  background: var(--okd-button-fill-grey-default-background);
  border-color: var(--okd-button-fill-grey-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-fill-grey-border-size);
  box-shadow: var(--okd-button-fill-grey-default-shadow);
  color: var(--okd-button-fill-grey-default-font-color);
}
.okui-btn.btn-fill-grey.hover,
.okui-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-fill-grey-hover-background);
  border-color: var(--okd-button-fill-grey-hover-border-color);
  box-shadow: var(--okd-button-fill-grey-hover-shadow);
  color: var(--okd-button-fill-grey-hover-font-color);
}
.okui-btn.btn-fill-grey.hover .btn-icon,
.okui-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-fill-grey-hover-icon-color);
}
.okui-btn.btn-fill-grey.active,
.okui-btn.btn-fill-grey:not(:disabled):active {
  background: var(--okd-button-fill-grey-active-background);
  border-color: var(--okd-button-fill-grey-active-border-color);
  box-shadow: var(--okd-button-fill-grey-active-shadow);
  color: var(--okd-button-fill-grey-active-font-color);
}
.okui-btn.btn-fill-grey.active .btn-icon,
.okui-btn.btn-fill-grey:not(:disabled):active .btn-icon {
  color: var(--okd-button-fill-grey-active-icon-color);
}
.okui-btn.btn-fill-grey:not(.loading).btn-disabled,
.okui-btn.btn-fill-grey:not(.loading):disabled {
  background: var(--okd-button-fill-grey-disabled-background);
  border-color: var(--okd-button-fill-grey-disabled-border-color);
  box-shadow: var(--okd-button-fill-grey-disabled-shadow);
  color: var(--okd-button-fill-grey-disabled-font-color);
}
.okui-btn.btn-fill-grey:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-grey:not(.loading):disabled .btn-icon {
  color: var(--okd-button-fill-grey-disabled-icon-color);
}
.okui-btn.btn-fill-grey.loading {
  cursor: pointer;
}
.okui-btn.btn-fill-grey .btn-icon {
  color: var(--okd-button-fill-grey-default-icon-color);
}
.okui-btn.btn-fill-grey .okui-btn-loader-text {
  color: var(--okd-button-fill-grey-default-font-color);
}
.okui-btn.btn-fill-grey.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-grey-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-fill-grey-border-size) * 2
  );
}
.okui-btn.btn-fill-grey.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-fill-grey.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-fill-grey-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-fill-grey.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-fill-grey-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-fill-grey-border-size) *
      2
  );
}
.okui-btn.btn-fill-grey.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight {
  background: var(--okd-button-outline-highlight-default-background);
  border-color: var(--okd-button-outline-highlight-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-outline-highlight-border-size);
  box-shadow: var(--okd-button-outline-highlight-default-shadow);
  color: var(--okd-button-outline-highlight-default-font-color);
}
.okui-btn.btn-outline-highlight.hover,
.okui-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-outline-highlight-hover-background);
  border-color: var(--okd-button-outline-highlight-hover-border-color);
  box-shadow: var(--okd-button-outline-highlight-hover-shadow);
  color: var(--okd-button-outline-highlight-hover-font-color);
}
.okui-btn.btn-outline-highlight.hover .btn-icon,
.okui-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-outline-highlight-hover-icon-color);
}
.okui-btn.btn-outline-highlight.active,
.okui-btn.btn-outline-highlight:not(:disabled):active {
  background: var(--okd-button-outline-highlight-active-background);
  border-color: var(--okd-button-outline-highlight-active-border-color);
  box-shadow: var(--okd-button-outline-highlight-active-shadow);
  color: var(--okd-button-outline-highlight-active-font-color);
}
.okui-btn.btn-outline-highlight.active .btn-icon,
.okui-btn.btn-outline-highlight:not(:disabled):active .btn-icon {
  color: var(--okd-button-outline-highlight-active-icon-color);
}
.okui-btn.btn-outline-highlight:not(.loading).btn-disabled,
.okui-btn.btn-outline-highlight:not(.loading):disabled {
  background: var(--okd-button-outline-highlight-disabled-background);
  border-color: var(--okd-button-outline-highlight-disabled-border-color);
  box-shadow: var(--okd-button-outline-highlight-disabled-shadow);
  color: var(--okd-button-outline-highlight-disabled-font-color);
}
.okui-btn.btn-outline-highlight:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-highlight:not(.loading):disabled .btn-icon {
  color: var(--okd-button-outline-highlight-disabled-icon-color);
}
.okui-btn.btn-outline-highlight.loading {
  cursor: pointer;
}
.okui-btn.btn-outline-highlight .btn-icon {
  color: var(--okd-button-outline-highlight-default-icon-color);
}
.okui-btn.btn-outline-highlight .okui-btn-loader-text {
  color: var(--okd-button-outline-highlight-default-font-color);
}
.okui-btn.btn-outline-highlight.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-highlight.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-outline-highlight-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-outline-highlight.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-highlight-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-highlight-border-size) * 2
  );
}
.okui-btn.btn-outline-highlight.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary {
  background: var(--okd-button-outline-primary-default-background);
  border-color: var(--okd-button-outline-primary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-outline-primary-border-size);
  box-shadow: var(--okd-button-outline-primary-default-shadow);
  color: var(--okd-button-outline-primary-default-font-color);
}
.okui-btn.btn-outline-primary.hover,
.okui-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-outline-primary-hover-background);
  border-color: var(--okd-button-outline-primary-hover-border-color);
  box-shadow: var(--okd-button-outline-primary-hover-shadow);
  color: var(--okd-button-outline-primary-hover-font-color);
}
.okui-btn.btn-outline-primary.hover .btn-icon,
.okui-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-outline-primary-hover-icon-color);
}
.okui-btn.btn-outline-primary.active,
.okui-btn.btn-outline-primary:not(:disabled):active {
  background: var(--okd-button-outline-primary-active-background);
  border-color: var(--okd-button-outline-primary-active-border-color);
  box-shadow: var(--okd-button-outline-primary-active-shadow);
  color: var(--okd-button-outline-primary-active-font-color);
}
.okui-btn.btn-outline-primary.active .btn-icon,
.okui-btn.btn-outline-primary:not(:disabled):active .btn-icon {
  color: var(--okd-button-outline-primary-active-icon-color);
}
.okui-btn.btn-outline-primary:not(.loading).btn-disabled,
.okui-btn.btn-outline-primary:not(.loading):disabled {
  background: var(--okd-button-outline-primary-disabled-background);
  border-color: var(--okd-button-outline-primary-disabled-border-color);
  box-shadow: var(--okd-button-outline-primary-disabled-shadow);
  color: var(--okd-button-outline-primary-disabled-font-color);
}
.okui-btn.btn-outline-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-primary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-outline-primary-disabled-icon-color);
}
.okui-btn.btn-outline-primary.loading {
  cursor: pointer;
}
.okui-btn.btn-outline-primary .btn-icon {
  color: var(--okd-button-outline-primary-default-icon-color);
}
.okui-btn.btn-outline-primary .okui-btn-loader-text {
  color: var(--okd-button-outline-primary-default-font-color);
}
.okui-btn.btn-outline-primary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-primary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-outline-primary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-outline-primary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-primary-border-size) * 2
  );
}
.okui-btn.btn-outline-primary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary {
  background: var(--okd-button-outline-secondary-default-background);
  border-color: var(--okd-button-outline-secondary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-outline-secondary-border-size);
  box-shadow: var(--okd-button-outline-secondary-default-shadow);
  color: var(--okd-button-outline-secondary-default-font-color);
}
.okui-btn.btn-outline-secondary.hover,
.okui-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-outline-secondary-hover-background);
  border-color: var(--okd-button-outline-secondary-hover-border-color);
  box-shadow: var(--okd-button-outline-secondary-hover-shadow);
  color: var(--okd-button-outline-secondary-hover-font-color);
}
.okui-btn.btn-outline-secondary.hover .btn-icon,
.okui-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-outline-secondary-hover-icon-color);
}
.okui-btn.btn-outline-secondary.active,
.okui-btn.btn-outline-secondary:not(:disabled):active {
  background: var(--okd-button-outline-secondary-active-background);
  border-color: var(--okd-button-outline-secondary-active-border-color);
  box-shadow: var(--okd-button-outline-secondary-active-shadow);
  color: var(--okd-button-outline-secondary-active-font-color);
}
.okui-btn.btn-outline-secondary.active .btn-icon,
.okui-btn.btn-outline-secondary:not(:disabled):active .btn-icon {
  color: var(--okd-button-outline-secondary-active-icon-color);
}
.okui-btn.btn-outline-secondary:not(.loading).btn-disabled,
.okui-btn.btn-outline-secondary:not(.loading):disabled {
  background: var(--okd-button-outline-secondary-disabled-background);
  border-color: var(--okd-button-outline-secondary-disabled-border-color);
  box-shadow: var(--okd-button-outline-secondary-disabled-shadow);
  color: var(--okd-button-outline-secondary-disabled-font-color);
}
.okui-btn.btn-outline-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-secondary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-outline-secondary-disabled-icon-color);
}
.okui-btn.btn-outline-secondary.loading {
  cursor: pointer;
}
.okui-btn.btn-outline-secondary .btn-icon {
  color: var(--okd-button-outline-secondary-default-icon-color);
}
.okui-btn.btn-outline-secondary .okui-btn-loader-text {
  color: var(--okd-button-outline-secondary-default-font-color);
}
.okui-btn.btn-outline-secondary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-secondary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-outline-secondary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-outline-secondary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-secondary-border-size) * 2
  );
}
.okui-btn.btn-outline-secondary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary {
  background: var(--okd-button-outline-tertiary-default-background);
  border-color: var(--okd-button-outline-tertiary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-outline-tertiary-border-size);
  box-shadow: var(--okd-button-outline-tertiary-default-shadow);
  color: var(--okd-button-outline-tertiary-default-font-color);
}
.okui-btn.btn-outline-tertiary.hover,
.okui-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-outline-tertiary-hover-background);
  border-color: var(--okd-button-outline-tertiary-hover-border-color);
  box-shadow: var(--okd-button-outline-tertiary-hover-shadow);
  color: var(--okd-button-outline-tertiary-hover-font-color);
}
.okui-btn.btn-outline-tertiary.hover .btn-icon,
.okui-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-outline-tertiary-hover-icon-color);
}
.okui-btn.btn-outline-tertiary.active,
.okui-btn.btn-outline-tertiary:not(:disabled):active {
  background: var(--okd-button-outline-tertiary-active-background);
  border-color: var(--okd-button-outline-tertiary-active-border-color);
  box-shadow: var(--okd-button-outline-tertiary-active-shadow);
  color: var(--okd-button-outline-tertiary-active-font-color);
}
.okui-btn.btn-outline-tertiary.active .btn-icon,
.okui-btn.btn-outline-tertiary:not(:disabled):active .btn-icon {
  color: var(--okd-button-outline-tertiary-active-icon-color);
}
.okui-btn.btn-outline-tertiary:not(.loading).btn-disabled,
.okui-btn.btn-outline-tertiary:not(.loading):disabled {
  background: var(--okd-button-outline-tertiary-disabled-background);
  border-color: var(--okd-button-outline-tertiary-disabled-border-color);
  box-shadow: var(--okd-button-outline-tertiary-disabled-shadow);
  color: var(--okd-button-outline-tertiary-disabled-font-color);
}
.okui-btn.btn-outline-tertiary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-tertiary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-outline-tertiary-disabled-icon-color);
}
.okui-btn.btn-outline-tertiary.loading {
  cursor: pointer;
}
.okui-btn.btn-outline-tertiary .btn-icon {
  color: var(--okd-button-outline-tertiary-default-icon-color);
}
.okui-btn.btn-outline-tertiary .okui-btn-loader-text {
  color: var(--okd-button-outline-tertiary-default-font-color);
}
.okui-btn.btn-outline-tertiary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-outline-tertiary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-outline-tertiary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-outline-tertiary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-outline-tertiary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-outline-tertiary-border-size) * 2
  );
}
.okui-btn.btn-outline-tertiary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary {
  background: var(--okd-button-text-primary-default-background);
  border-color: var(--okd-button-text-primary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-primary-border-size);
  box-shadow: var(--okd-button-text-primary-default-shadow);
  color: var(--okd-button-text-primary-default-font-color);
}
.okui-btn.btn-text-primary.hover,
.okui-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-primary-hover-background);
  border-color: var(--okd-button-text-primary-hover-border-color);
  box-shadow: var(--okd-button-text-primary-hover-shadow);
  color: var(--okd-button-text-primary-hover-font-color);
}
.okui-btn.btn-text-primary.hover .btn-icon,
.okui-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-primary-hover-icon-color);
}
.okui-btn.btn-text-primary.active,
.okui-btn.btn-text-primary:not(:disabled):active {
  background: var(--okd-button-text-primary-active-background);
  border-color: var(--okd-button-text-primary-active-border-color);
  box-shadow: var(--okd-button-text-primary-active-shadow);
  color: var(--okd-button-text-primary-active-font-color);
}
.okui-btn.btn-text-primary.active .btn-icon,
.okui-btn.btn-text-primary:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-primary-active-icon-color);
}
.okui-btn.btn-text-primary:not(.loading).btn-disabled,
.okui-btn.btn-text-primary:not(.loading):disabled {
  background: var(--okd-button-text-primary-disabled-background);
  border-color: var(--okd-button-text-primary-disabled-border-color);
  box-shadow: var(--okd-button-text-primary-disabled-shadow);
  color: var(--okd-button-text-primary-disabled-font-color);
}
.okui-btn.btn-text-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-primary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-primary-disabled-icon-color);
}
.okui-btn.btn-text-primary.loading {
  cursor: pointer;
}
.okui-btn.btn-text-primary .btn-icon {
  color: var(--okd-button-text-primary-default-icon-color);
}
.okui-btn.btn-text-primary .okui-btn-loader-text {
  color: var(--okd-button-text-primary-default-font-color);
}
.okui-btn.btn-text-primary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-primary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-primary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-primary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-primary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-primary-border-size) * 2
  );
}
.okui-btn.btn-text-primary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary {
  background: var(--okd-button-text-secondary-default-background);
  border-color: var(--okd-button-text-secondary-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-secondary-border-size);
  box-shadow: var(--okd-button-text-secondary-default-shadow);
  color: var(--okd-button-text-secondary-default-font-color);
}
.okui-btn.btn-text-secondary.hover,
.okui-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-secondary-hover-background);
  border-color: var(--okd-button-text-secondary-hover-border-color);
  box-shadow: var(--okd-button-text-secondary-hover-shadow);
  color: var(--okd-button-text-secondary-hover-font-color);
}
.okui-btn.btn-text-secondary.hover .btn-icon,
.okui-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-secondary-hover-icon-color);
}
.okui-btn.btn-text-secondary.active,
.okui-btn.btn-text-secondary:not(:disabled):active {
  background: var(--okd-button-text-secondary-active-background);
  border-color: var(--okd-button-text-secondary-active-border-color);
  box-shadow: var(--okd-button-text-secondary-active-shadow);
  color: var(--okd-button-text-secondary-active-font-color);
}
.okui-btn.btn-text-secondary.active .btn-icon,
.okui-btn.btn-text-secondary:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-secondary-active-icon-color);
}
.okui-btn.btn-text-secondary:not(.loading).btn-disabled,
.okui-btn.btn-text-secondary:not(.loading):disabled {
  background: var(--okd-button-text-secondary-disabled-background);
  border-color: var(--okd-button-text-secondary-disabled-border-color);
  box-shadow: var(--okd-button-text-secondary-disabled-shadow);
  color: var(--okd-button-text-secondary-disabled-font-color);
}
.okui-btn.btn-text-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-secondary:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-secondary-disabled-icon-color);
}
.okui-btn.btn-text-secondary.loading {
  cursor: pointer;
}
.okui-btn.btn-text-secondary .btn-icon {
  color: var(--okd-button-text-secondary-default-icon-color);
}
.okui-btn.btn-text-secondary .okui-btn-loader-text {
  color: var(--okd-button-text-secondary-default-font-color);
}
.okui-btn.btn-text-secondary.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-secondary.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-secondary-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-secondary.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-secondary-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-secondary-border-size) * 2
  );
}
.okui-btn.btn-text-secondary.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red {
  background: var(--okd-button-text-red-default-background);
  border-color: var(--okd-button-text-red-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-red-border-size);
  box-shadow: var(--okd-button-text-red-default-shadow);
  color: var(--okd-button-text-red-default-font-color);
}
.okui-btn.btn-text-red.hover,
.okui-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-red-hover-background);
  border-color: var(--okd-button-text-red-hover-border-color);
  box-shadow: var(--okd-button-text-red-hover-shadow);
  color: var(--okd-button-text-red-hover-font-color);
}
.okui-btn.btn-text-red.hover .btn-icon,
.okui-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-red-hover-icon-color);
}
.okui-btn.btn-text-red.active,
.okui-btn.btn-text-red:not(:disabled):active {
  background: var(--okd-button-text-red-active-background);
  border-color: var(--okd-button-text-red-active-border-color);
  box-shadow: var(--okd-button-text-red-active-shadow);
  color: var(--okd-button-text-red-active-font-color);
}
.okui-btn.btn-text-red.active .btn-icon,
.okui-btn.btn-text-red:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-red-active-icon-color);
}
.okui-btn.btn-text-red:not(.loading).btn-disabled,
.okui-btn.btn-text-red:not(.loading):disabled {
  background: var(--okd-button-text-red-disabled-background);
  border-color: var(--okd-button-text-red-disabled-border-color);
  box-shadow: var(--okd-button-text-red-disabled-shadow);
  color: var(--okd-button-text-red-disabled-font-color);
}
.okui-btn.btn-text-red:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-red:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-red-disabled-icon-color);
}
.okui-btn.btn-text-red.loading {
  cursor: pointer;
}
.okui-btn.btn-text-red .btn-icon {
  color: var(--okd-button-text-red-default-icon-color);
}
.okui-btn.btn-text-red .okui-btn-loader-text {
  color: var(--okd-button-text-red-default-font-color);
}
.okui-btn.btn-text-red.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-red.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xxs-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xxs-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-red.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xs-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-red.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-red.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-sm-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-red.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-md-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-red.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-lg-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-red.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-red-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-red.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-red-border-size) * 2 +
      var(--okd-button-xl-line-height) + var(--okd-button-text-red-border-size) *
      2
  );
}
.okui-btn.btn-text-red.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green {
  background: var(--okd-button-text-green-default-background);
  border-color: var(--okd-button-text-green-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-green-border-size);
  box-shadow: var(--okd-button-text-green-default-shadow);
  color: var(--okd-button-text-green-default-font-color);
}
.okui-btn.btn-text-green.hover,
.okui-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-green-hover-background);
  border-color: var(--okd-button-text-green-hover-border-color);
  box-shadow: var(--okd-button-text-green-hover-shadow);
  color: var(--okd-button-text-green-hover-font-color);
}
.okui-btn.btn-text-green.hover .btn-icon,
.okui-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-green-hover-icon-color);
}
.okui-btn.btn-text-green.active,
.okui-btn.btn-text-green:not(:disabled):active {
  background: var(--okd-button-text-green-active-background);
  border-color: var(--okd-button-text-green-active-border-color);
  box-shadow: var(--okd-button-text-green-active-shadow);
  color: var(--okd-button-text-green-active-font-color);
}
.okui-btn.btn-text-green.active .btn-icon,
.okui-btn.btn-text-green:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-green-active-icon-color);
}
.okui-btn.btn-text-green:not(.loading).btn-disabled,
.okui-btn.btn-text-green:not(.loading):disabled {
  background: var(--okd-button-text-green-disabled-background);
  border-color: var(--okd-button-text-green-disabled-border-color);
  box-shadow: var(--okd-button-text-green-disabled-shadow);
  color: var(--okd-button-text-green-disabled-font-color);
}
.okui-btn.btn-text-green:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-green:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-green-disabled-icon-color);
}
.okui-btn.btn-text-green.loading {
  cursor: pointer;
}
.okui-btn.btn-text-green .btn-icon {
  color: var(--okd-button-text-green-default-icon-color);
}
.okui-btn.btn-text-green .okui-btn-loader-text {
  color: var(--okd-button-text-green-default-font-color);
}
.okui-btn.btn-text-green.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-green.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-green.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-green.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-text-green-border-size) *
      2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-s-line-height) + var(--okd-button-text-green-border-size) *
      2
  );
}
.okui-btn.btn-text-green.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-green.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-green.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-green.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-green.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-green-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-green.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-green-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-green-border-size) * 2
  );
}
.okui-btn.btn-text-green.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange {
  background: var(--okd-button-text-orange-default-background);
  border-color: var(--okd-button-text-orange-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-orange-border-size);
  box-shadow: var(--okd-button-text-orange-default-shadow);
  color: var(--okd-button-text-orange-default-font-color);
}
.okui-btn.btn-text-orange.hover,
.okui-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-orange-hover-background);
  border-color: var(--okd-button-text-orange-hover-border-color);
  box-shadow: var(--okd-button-text-orange-hover-shadow);
  color: var(--okd-button-text-orange-hover-font-color);
}
.okui-btn.btn-text-orange.hover .btn-icon,
.okui-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-orange-hover-icon-color);
}
.okui-btn.btn-text-orange.active,
.okui-btn.btn-text-orange:not(:disabled):active {
  background: var(--okd-button-text-orange-active-background);
  border-color: var(--okd-button-text-orange-active-border-color);
  box-shadow: var(--okd-button-text-orange-active-shadow);
  color: var(--okd-button-text-orange-active-font-color);
}
.okui-btn.btn-text-orange.active .btn-icon,
.okui-btn.btn-text-orange:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-orange-active-icon-color);
}
.okui-btn.btn-text-orange:not(.loading).btn-disabled,
.okui-btn.btn-text-orange:not(.loading):disabled {
  background: var(--okd-button-text-orange-disabled-background);
  border-color: var(--okd-button-text-orange-disabled-border-color);
  box-shadow: var(--okd-button-text-orange-disabled-shadow);
  color: var(--okd-button-text-orange-disabled-font-color);
}
.okui-btn.btn-text-orange:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-orange:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-orange-disabled-icon-color);
}
.okui-btn.btn-text-orange.loading {
  cursor: pointer;
}
.okui-btn.btn-text-orange .btn-icon {
  color: var(--okd-button-text-orange-default-icon-color);
}
.okui-btn.btn-text-orange .okui-btn-loader-text {
  color: var(--okd-button-text-orange-default-font-color);
}
.okui-btn.btn-text-orange.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-orange.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-orange-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-orange.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-orange-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-orange-border-size) * 2
  );
}
.okui-btn.btn-text-orange.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow {
  background: var(--okd-button-text-yellow-default-background);
  border-color: var(--okd-button-text-yellow-default-border-color);
  border-style: solid;
  border-width: var(--okd-button-text-yellow-border-size);
  box-shadow: var(--okd-button-text-yellow-default-shadow);
  color: var(--okd-button-text-yellow-default-font-color);
}
.okui-btn.btn-text-yellow.hover,
.okui-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover {
  background: var(--okd-button-text-yellow-hover-background);
  border-color: var(--okd-button-text-yellow-hover-border-color);
  box-shadow: var(--okd-button-text-yellow-hover-shadow);
  color: var(--okd-button-text-yellow-hover-font-color);
}
.okui-btn.btn-text-yellow.hover .btn-icon,
.okui-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover
  .btn-icon {
  color: var(--okd-button-text-yellow-hover-icon-color);
}
.okui-btn.btn-text-yellow.active,
.okui-btn.btn-text-yellow:not(:disabled):active {
  background: var(--okd-button-text-yellow-active-background);
  border-color: var(--okd-button-text-yellow-active-border-color);
  box-shadow: var(--okd-button-text-yellow-active-shadow);
  color: var(--okd-button-text-yellow-active-font-color);
}
.okui-btn.btn-text-yellow.active .btn-icon,
.okui-btn.btn-text-yellow:not(:disabled):active .btn-icon {
  color: var(--okd-button-text-yellow-active-icon-color);
}
.okui-btn.btn-text-yellow:not(.loading).btn-disabled,
.okui-btn.btn-text-yellow:not(.loading):disabled {
  background: var(--okd-button-text-yellow-disabled-background);
  border-color: var(--okd-button-text-yellow-disabled-border-color);
  box-shadow: var(--okd-button-text-yellow-disabled-shadow);
  color: var(--okd-button-text-yellow-disabled-font-color);
}
.okui-btn.btn-text-yellow:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-yellow:not(.loading):disabled .btn-icon {
  color: var(--okd-button-text-yellow-disabled-icon-color);
}
.okui-btn.btn-text-yellow.loading {
  cursor: pointer;
}
.okui-btn.btn-text-yellow .btn-icon {
  color: var(--okd-button-text-yellow-default-icon-color);
}
.okui-btn.btn-text-yellow .okui-btn-loader-text {
  color: var(--okd-button-text-yellow-default-font-color);
}
.okui-btn.btn-text-yellow.btn-xxs {
  padding: calc(
      var(--okd-button-xxs-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-xxs-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-xxs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xxs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xxs-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-xxs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-xs {
  padding: calc(
      var(--okd-button-xs-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-xs-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-xs.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xs-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xs-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-xs.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-s {
  padding: calc(
      var(--okd-button-s-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-s-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-s.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-s-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-s-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-s.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-sm {
  padding: calc(
      var(--okd-button-sm-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-sm-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-sm.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-sm-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-sm-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-sm.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-md {
  padding: calc(
      var(--okd-button-md-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-md-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-md.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-md-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-md-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-md.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-lg {
  padding: calc(
      var(--okd-button-lg-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-lg-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-lg.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-lg-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-lg-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-lg.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-text-yellow.btn-xl {
  padding: calc(
      var(--okd-button-xl-padding-vertical) + 1px -
        var(--okd-button-text-yellow-border-size)
    )
    var(--okd-button-xl-padding-horizontal);
}
.okui-btn.btn-text-yellow.btn-xl.okui-btn-strict-circle {
  border-radius: 100px;
  height: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
  min-width: 0;
  overflow: hidden;
  padding: 0;
  width: calc(
    var(--okd-button-xl-padding-vertical) * 2 + 2px -
      var(--okd-button-text-yellow-border-size) * 2 +
      var(--okd-button-xl-line-height) +
      var(--okd-button-text-yellow-border-size) * 2
  );
}
.okui-btn.btn-text-yellow.btn-xl.okui-btn-strict-circle .btn-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.btn-xxs {
  border-radius: var(--okd-button-xxs-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-xxs-font-weight, 500);
  min-width: var(--okd-button-xxs-min-width);
}
.okui-btn.btn-xxs,
.okui-btn.btn-xxs .okui-btn-loader-text {
  font-size: var(--okd-button-xxs-font-size);
  line-height: var(--okd-button-xxs-line-height);
}
.okui-btn.btn-xxs .okui-btn-loader-text {
  margin-left: var(--okd-button-xxs-loader-text-margin-left);
}
.okui-btn.btn-xxs.btn-rect {
  border-radius: 4px;
  border-radius: var(--okd-button-rect-xxs-border-radius, 4px);
}
.okui-btn.btn-xs {
  border-radius: var(--okd-button-xs-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-xs-font-weight, 500);
  min-width: var(--okd-button-xs-min-width);
}
.okui-btn.btn-xs,
.okui-btn.btn-xs .okui-btn-loader-text {
  font-size: var(--okd-button-xs-font-size);
  line-height: var(--okd-button-xs-line-height);
}
.okui-btn.btn-xs .okui-btn-loader-text {
  margin-left: var(--okd-button-xs-loader-text-margin-left);
}
.okui-btn.btn-xs.btn-rect {
  border-radius: 4px;
  border-radius: var(--okd-button-rect-xs-border-radius, 4px);
}
.okui-btn.btn-s {
  border-radius: var(--okd-button-s-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-s-font-weight, 500);
  min-width: var(--okd-button-s-min-width);
}
.okui-btn.btn-s,
.okui-btn.btn-s .okui-btn-loader-text {
  font-size: var(--okd-button-s-font-size);
  line-height: var(--okd-button-s-line-height);
}
.okui-btn.btn-s .okui-btn-loader-text {
  margin-left: var(--okd-button-s-loader-text-margin-left);
}
.okui-btn.btn-s.btn-rect {
  border-radius: 4px;
  border-radius: var(--okd-button-rect-s-border-radius, 4px);
}
.okui-btn.btn-sm {
  border-radius: var(--okd-button-sm-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-sm-font-weight, 500);
  min-width: var(--okd-button-sm-min-width);
}
.okui-btn.btn-sm,
.okui-btn.btn-sm .okui-btn-loader-text {
  font-size: var(--okd-button-sm-font-size);
  line-height: var(--okd-button-sm-line-height);
}
.okui-btn.btn-sm .okui-btn-loader-text {
  margin-left: var(--okd-button-sm-loader-text-margin-left);
}
.okui-btn.btn-sm.btn-rect {
  border-radius: 4px;
  border-radius: var(--okd-button-rect-sm-border-radius, 4px);
}
.okui-btn.btn-md {
  border-radius: var(--okd-button-md-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-md-font-weight, 500);
  min-width: var(--okd-button-md-min-width);
}
.okui-btn.btn-md,
.okui-btn.btn-md .okui-btn-loader-text {
  font-size: var(--okd-button-md-font-size);
  line-height: var(--okd-button-md-line-height);
}
.okui-btn.btn-md .okui-btn-loader-text {
  margin-left: var(--okd-button-md-loader-text-margin-left);
}
.okui-btn.btn-md.btn-rect {
  border-radius: 4px;
  border-radius: var(--okd-button-rect-md-border-radius, 4px);
}
.okui-btn.btn-lg {
  border-radius: var(--okd-button-lg-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-lg-font-weight, 500);
  min-width: var(--okd-button-lg-min-width);
}
.okui-btn.btn-lg,
.okui-btn.btn-lg .okui-btn-loader-text {
  font-size: var(--okd-button-lg-font-size);
  line-height: var(--okd-button-lg-line-height);
}
.okui-btn.btn-lg .okui-btn-loader-text {
  margin-left: var(--okd-button-lg-loader-text-margin-left);
}
.okui-btn.btn-lg.btn-rect {
  border-radius: 8px;
  border-radius: var(--okd-button-rect-lg-border-radius, 8px);
}
.okui-btn.btn-xl {
  border-radius: var(--okd-button-xl-border-radius);
  font-weight: 500;
  font-weight: var(--okd-button-xl-font-weight, 500);
  min-width: var(--okd-button-xl-min-width);
}
.okui-btn.btn-xl,
.okui-btn.btn-xl .okui-btn-loader-text {
  font-size: var(--okd-button-xl-font-size);
  line-height: var(--okd-button-xl-line-height);
}
.okui-btn.btn-xl .okui-btn-loader-text {
  margin-left: var(--okd-button-xl-loader-text-margin-left);
}
.okui-btn.btn-xl.btn-rect {
  border-radius: 8px;
  border-radius: var(--okd-button-rect-xl-border-radius, 8px);
}
.okui-btn.btn-disabled,
.okui-btn:disabled {
  cursor: not-allowed;
}
.okui-btn.block {
  display: flex;
  width: 100%;
}
.okui-btn.btn-circle {
  border-radius: 100px !important;
}
.okui-btn .btn-content {
  align-items: center;
  display: flex;
}
.okui-btn .okui-btn-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.okui-btn.loading .btn-content {
  opacity: 0;
}
.okui-btn.loading .btn-content-position {
  display: none;
}
.okui-btn.loading .okui-btn-loader {
  line-height: 0;
  position: absolute;
}
.okui-btn.loading .btn-loader-position-absolute {
  position: relative;
}
.okui-btn-loader-container {
  height: 100%;
  position: relative;
}
.okui-btn .btn-icon + .btn-content {
  margin-left: 4px;
}
.okui-btn.btn-xxs .btn-icon {
  font-size: var(--okd-button-xxs-icon-size);
}
.okui-btn.btn-xxs .btn-icon-leading {
  margin-right: var(--okd-button-xxs-icon-margin);
}
.okui-btn.btn-xxs .btn-icon-tailing {
  margin-left: var(--okd-button-xxs-icon-margin);
}
.okui-btn.btn-xxs .okui-btn-loader-size {
  border-radius: var(--okd-button-xxs-loader-size);
  height: var(--okd-button-xxs-loader-size);
  width: var(--okd-button-xxs-loader-size);
}
.okui-btn.btn-xs .btn-icon {
  font-size: var(--okd-button-xs-icon-size);
}
.okui-btn.btn-xs .btn-icon-leading {
  margin-right: var(--okd-button-xs-icon-margin);
}
.okui-btn.btn-xs .btn-icon-tailing {
  margin-left: var(--okd-button-xs-icon-margin);
}
.okui-btn.btn-xs .okui-btn-loader-size {
  border-radius: var(--okd-button-xs-loader-size);
  height: var(--okd-button-xs-loader-size);
  width: var(--okd-button-xs-loader-size);
}
.okui-btn.btn-s .btn-icon {
  font-size: var(--okd-button-s-icon-size);
}
.okui-btn.btn-s .btn-icon-leading {
  margin-right: var(--okd-button-s-icon-margin);
}
.okui-btn.btn-s .btn-icon-tailing {
  margin-left: var(--okd-button-s-icon-margin);
}
.okui-btn.btn-s .okui-btn-loader-size {
  border-radius: var(--okd-button-s-loader-size);
  height: var(--okd-button-s-loader-size);
  width: var(--okd-button-s-loader-size);
}
.okui-btn.btn-sm .btn-icon {
  font-size: var(--okd-button-sm-icon-size);
}
.okui-btn.btn-sm .btn-icon-leading {
  margin-right: var(--okd-button-sm-icon-margin);
}
.okui-btn.btn-sm .btn-icon-tailing {
  margin-left: var(--okd-button-sm-icon-margin);
}
.okui-btn.btn-sm .okui-btn-loader-size {
  border-radius: var(--okd-button-sm-loader-size);
  height: var(--okd-button-sm-loader-size);
  width: var(--okd-button-sm-loader-size);
}
.okui-btn.btn-md .btn-icon {
  font-size: var(--okd-button-md-icon-size);
}
.okui-btn.btn-md .btn-icon-leading {
  margin-right: var(--okd-button-md-icon-margin);
}
.okui-btn.btn-md .btn-icon-tailing {
  margin-left: var(--okd-button-md-icon-margin);
}
.okui-btn.btn-md .okui-btn-loader-size {
  border-radius: var(--okd-button-md-loader-size);
  height: var(--okd-button-md-loader-size);
  width: var(--okd-button-md-loader-size);
}
.okui-btn.btn-lg .btn-icon {
  font-size: var(--okd-button-lg-icon-size);
}
.okui-btn.btn-lg .btn-icon-leading {
  margin-right: var(--okd-button-lg-icon-margin);
}
.okui-btn.btn-lg .btn-icon-tailing {
  margin-left: var(--okd-button-lg-icon-margin);
}
.okui-btn.btn-lg .okui-btn-loader-size {
  border-radius: var(--okd-button-lg-loader-size);
  height: var(--okd-button-lg-loader-size);
  width: var(--okd-button-lg-loader-size);
}
.okui-btn.btn-xl .btn-icon {
  font-size: var(--okd-button-xl-icon-size);
}
.okui-btn.btn-xl .btn-icon-leading {
  margin-right: var(--okd-button-xl-icon-margin);
}
.okui-btn.btn-xl .btn-icon-tailing {
  margin-left: var(--okd-button-xl-icon-margin);
}
.okui-btn.btn-xl .okui-btn-loader-size {
  border-radius: var(--okd-button-xl-loader-size);
  height: var(--okd-button-xl-loader-size);
  width: var(--okd-button-xl-loader-size);
}
.okui-btn .okui-btn-fill-highlight-loader {
  border-color: var(--okd-button-fill-highlight-loader-track-color);
  border-top-color: var(--okd-button-fill-highlight-loader-mark-color);
}
.okui-btn .okui-btn-fill-primary-loader {
  border-color: var(--okd-button-fill-primary-loader-track-color);
  border-top-color: var(--okd-button-fill-primary-loader-mark-color);
}
.okui-btn .okui-btn-fill-secondary-loader {
  border-color: var(--okd-button-fill-secondary-loader-track-color);
  border-top-color: var(--okd-button-fill-secondary-loader-mark-color);
}
.okui-btn .okui-btn-fill-tertiary-loader {
  border-color: var(--okd-button-fill-tertiary-loader-track-color);
  border-top-color: var(--okd-button-fill-tertiary-loader-mark-color);
}
.okui-btn .okui-btn-fill-quaternary-loader {
  border-color: var(--okd-button-fill-quaternary-loader-track-color);
  border-top-color: var(--okd-button-fill-quaternary-loader-mark-color);
}
.okui-btn .okui-btn-fill-red-loader {
  border-color: var(--okd-button-fill-red-loader-track-color);
  border-top-color: var(--okd-button-fill-red-loader-mark-color);
}
.okui-btn .okui-btn-fill-green-loader {
  border-color: var(--okd-button-fill-green-loader-track-color);
  border-top-color: var(--okd-button-fill-green-loader-mark-color);
}
.okui-btn .okui-btn-fill-grey-loader {
  border-color: var(--okd-button-fill-grey-loader-track-color);
  border-top-color: var(--okd-button-fill-grey-loader-mark-color);
}
.okui-btn .okui-btn-outline-highlight-loader {
  border-color: var(--okd-button-outline-highlight-loader-track-color);
  border-top-color: var(--okd-button-outline-highlight-loader-mark-color);
}
.okui-btn .okui-btn-outline-primary-loader {
  border-color: var(--okd-button-outline-primary-loader-track-color);
  border-top-color: var(--okd-button-outline-primary-loader-mark-color);
}
.okui-btn .okui-btn-outline-secondary-loader {
  border-color: var(--okd-button-outline-secondary-loader-track-color);
  border-top-color: var(--okd-button-outline-secondary-loader-mark-color);
}
.okui-btn .okui-btn-outline-tertiary-loader {
  border-color: var(--okd-button-outline-tertiary-loader-track-color);
  border-top-color: var(--okd-button-outline-tertiary-loader-mark-color);
}