:root {
}
.btn-wrap {
    position: relative;
    z-index: var(--z-index-background);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*! overflow: hidden; */
    border-radius: var(--std-unit-x1);
    width: min-content;
}
.btn-wrap > a {
    position        : relative;
    z-index         : var(--z-index-background);
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    /* padding         : 1px; */
}

.btn-wrap.thinking:after {
    position      : absolute;
    z-index       : var(--z-index-background);
    top           : -1px;
    left          : -1px;
    display       : block;
    width         : calc(100% + 2px);
    height        : calc(100% + 2px);
    content       : "";
    animation     : var(--btn-thinking);
    border-radius : var(--theme-border-radius);
    background    : linear-gradient(0deg, var(--btn-thinking-main-color), var(--btn-thinking-off-color));
}

.btn-wrap > .btn {
    position    : relative;
    z-index     : var(--z-index-baseline);
    white-space : nowrap;
}
.btn {
    display            : inline-grid;
    width              : fit-content;
    padding            : 4px 12px;
    color              : var(--theme-btn-font-color);
    border             : 0;
    border-radius      : var(--theme-border-radius);
    background-color   : var(--theme-btn-bg-color);
    -webkit-appearance : none;
    align-items        : center;
    justify-content    : center;
}
.btn.link {
    color            : var(--theme-link);
    background-color : unset;
}
.btn.thinking:before {
    font-family : var(--FontAwesome);
    font-size   : 1.2rem;
    position    : absolute;
    z-index     : var(--z-index-background);
    top         : 8px;
    right       : 8px;
    display     : inline-block;
    content     : var(--FA-icon-loading);
    animation   : var(--thinking);
    color       : var(--theme-font-0);
}
.btn:not(.link):not(.disabled):hover {
    cursor           : pointer;
    color            : var(--theme-btn-font-color-hover);
    /* border           : var(--btn-hover-border); */
    background-color : var(--theme-btn-bg-color-hover);
}
.btn.link:hover {
    cursor : pointer;
    color  : var(--theme-link-hover);
}
.btn:not(.link):active {
    color  : var(--theme-btn-font-color-active);
    filter : var(--theme-filter-active);
}
.btn.link:active {
    color : var(--theme-link-active);
}

.btn.--light {
    color            : var(--theme-btn-font-color-light);
    background-color : var(--theme-btn-bg-color-light);
}

.btn.--light:hover {
    color            : var(--theme-btn-bg-color-light-hover);
    background-color : var(--theme-btn-font-color-light-hover);
}
.btn.--light:active {
    color            : var(--theme-btn-bg-color-light-active);
    background-color : var(--theme-btn-font-color-light-active);
}
.btn-wrap.disabled,
.btn.disabled {
    color            : var(--theme-btn-font-color-disabled);
    background-color : var(--theme-btn-bg-color-disabled);
}
.btn-wrap.disabled:hover,
.btn.disabled:hover {
    cursor : not-allowed;
}
.btn.main {
    color            : var(--theme-btn-main-font-color);
    background-color : var(--theme-btn-main-bg-color);
}

.btn.main.disabled {
    color            : var(--theme-btn-main-font-color-disabled);
    background-color : var(--theme-btn-main-bg-color-disabled);
    opacity          : .8;
}

.btn.main:not(.disabled):hover {
    color            : var(--theme-btn-main-font-color-hover);
    background-color : var(--theme-btn-main-bg-color-hover);
}
.btn.main:active {
    color  : var(--theme-btn-main-font-color-active);
    filter : var(--theme-btn-main-bg-color-active);
}

.btn.main.--light {
    color            : var(--theme-btn-main-font-color-light);
    background-color : var(--theme-btn-main-bg-color-light);
}

.btn.main.--light:hover {
    color: var(--theme-btn-main-font-color-light-hover);
    background-color: var(--theme-btn-main-bg-color-light-hover);
}
.btn.main.--light:active {
    color            : var(--theme-btn-main-font-color-light-active);
    background-color : var(--theme-btn-main-bg-color-light-active);
}

.btn:focus {
    outline : var(--theme-primary-dark) solid 1px;
}

.btn-group {
    position         : relative;
    width            : fit-content;
    padding          : 4px 12px;
    color            : var(--theme-btn-font-color);
    border           : 0;
    border-radius    : var(--theme-border-radius);
    background-color : var(--theme-btn-bg-color);
    cursor: pointer;
}

.btn-group:hover {
    color: var(--theme-btn-font-color-hover);
    background-color: var(--theme-btn-bg-color-hover);
}
.btn-group:after {
    content : attr(data-name);
}
.btn-group > .group-btns {
    z-index          : var(--z-index-popup);
    display          : none;
    padding          : 5px;
    border-radius    : var(--theme-border-radius);
    background-color : var(--theme-secondary);
    box-shadow       : var(--standard-box-shadow)
}
.btn-group:hover > .group-btns {
    position        : absolute;
    top             : 100%;
    left            : 0;
    display         : grid;
    justify-content : flex-start;
    z-index         : var(--z-index-notice);
}
.btn-group > .group-btns > .btn-wrap {
    justify-content : flex-start;
}