.singlebutton {
    display: inline-block;

    + .singlebutton {
        margin-left: $spacer * 0.5;
    }

    + .btn-link {
        margin-left: .35rem;
    }
}

.continuebutton {
    text-align: right;

    @include media-breakpoint-between(xs,sm) {
    .btn, a {
        width: 100%;
    }
    }
}

p.arrow_button {
    margin-top: 5em;
    text-align: center;
}

#addcontrols {
    // This is displayed in a column between 2 20 row multi-selects. This should be just short of half way.
    margin-top: 38px;
    text-align: center;

    label {
        display: inline;
    }
}

#removecontrols {
    margin-top: 10px;
}

#addcontrols,
#removecontrols {
    input {
        width: 100%;
        margin: auto;
    }
}

.btn-lineup {
    margin: 0 0 10px 5px;
}

.btn.btn-icon {
    height: ($icon-width + 20px);
    width: ($icon-width + 20px);
    font-size: $icon-width;
    line-height: $icon-width;
    padding: 0;
    border-radius: $btn-border-radius;
    flex-shrink: 0;

    justify-content: center;

    .action-menu & {
        width: auto;
        font-size: $font-size-sm;
    }

    .action-menu.dropdown-btn & {
        background-color: transparent;
    }

    .sticky-header-settings-menu &,
    #headerBtn & {
        padding: 0;
        height: ($icon-width + 20px);
        width: ($icon-width + 20px);
    }

    .rui-activity-actions & {
        width: auto;
        height: 40px;
        padding: 0 1rem;
        font-size: $font-size-sm;

        @include hover-focus {
            background-color: $gray-200;
    
            .theme-dark & {background-color: $dm-gray-200;}
        }
    }

    @each $size, $length in $iconsizes {
        &.icon-size-#{$size} {
            height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
            width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
            line-height: $length !important; /* stylelint-disable-line declaration-no-important */
        }
    }
}

.btn-sm.btn-icon {
    height: 33px;
}

.btn-icon--xs {
    width: 30px;
    height: 30px;
    font-size: $icon-width;
    line-height: $icon-width;
    padding: 0;
    border-radius: $btn-border-radius-xl;
    flex-shrink: 0;
  
    @include hover-focus {
        background-color: $gray-200;
  
        .theme-dark & {background-color: $dm-gray-200;}
    }
  }


.btn--topbar {
    /*margin-right: -20px;*/
    color: $body-color-secondary;

    .theme-dark & {color: $dm-body-color-secondary;}

    &:hover {
        background-color: $gray-100;
        color: $body-color;

        .theme-dark & {
            background-color: $dm-gray-100;
            color: $dm-body-color;
        }
    }
}


.settings-menu {
    form {
        margin: 0;
    }
}

// Loading icon inside button
.btn {
    .loading-icon {
        img {
            width: 14px;
            height: 14px;
        }
    }
}