.okui-a11y-button:focus-visible {
    border-radius: 4px;
    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-a11y-text {
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.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.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-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 {
    -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-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-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
}