.btn {
    padding: 0 var(--layout-padding);
    width: var(--btn-width);
    height: var(--btn-height);
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    background-color: var(--color-grey-light);
    color: var(--color-black);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    letter-spacing: var(--letter-spacing);
    font-size: var(--font-size-text-s);
}

.btn:hover {
    background-color: var(--btn-grey-default);
}

.btn:active,
.btn:focus {
    background-color: var(--color-grey);
}

.btn:disabled {
    color: var(--color-grey-light);
}



/* button save */

.btn.btn-save,
body.layout--showroom .modal-container .btn.btn-save {
    background-color: var(--color-black);
    color: var(--color-white);
    width: var(--btn-width);
}

.btn.btn-save:hover,
body.layout--showroom .modal-container .btn.btn-save:hover {
    background-color: var(--btn-black-light);
}

.btn.btn-save:active,
.btn.btn-save:focus,
body.layout--showroom .modal-container .btn.btn-save:active,
body.layout--showroom .modal-container .btn.btn-save:focus {
    box-shadow: 0 0 0 2px var(--color-grey-medium);
    background-color: var(--color-black);
}

.btn.btn-save:disabled,
body.layout--showroom .modal-container .btn.btn-save:disabled {
    color: var(--color-grey-dark);
}

/** button save for showroom **/

body.layout--showroom .btn.btn-save,
#showroom-control-panel-overlay .showroom-media-button-wrapper button,
#showroom-control-panel-overlay .showroom-category-button-wrapper button {
    background-color: var(--color-white);
    color: var(--color-black);
    width: 100%;
}

body.layout--showroom .btn.btn-save:hover {
    background-color: var(--color-grey);
}

body.layout--showroom .btn.btn-save:active,
body.layout--showroom .btn.btn-save:focus,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:active,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:focus {
    box-shadow: unset;
    border: 2px solid var(--color-grey);
    background-color: var(--color-white);
}

body.layout--showroom .btn.btn-save:disabled,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:disabled {
    color: var(--btn-grey-default-dark);
}



/* button edit */

.btn.btn-edit {
    height: var(--btn-edit-height);
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    font-weight: 400;
}

.btn.btn-edit:hover,
#user-list-overview-table tbody td > a:hover {
    background-color: var(--color-grey-light);
}

.btn.btn-edit:active,
.btn.btn-edit:focus,
#user-list-overview-table tbody td > a:active,
#user-list-overview-table tbody td > a:focus {
    border: 1px solid var(--color-grey-light);
    background-color: var(--color-grey-light);
}

.btn.btn-edit:disabled,
#user-list-overview-table tbody td > a:disabled {
    color: var(--color-grey-medium);
}



/* button delete */

.btn.btn-delete:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.btn.btn-delete:active,
.btn.btn-delete:focus {
    box-shadow: 0 0 0 2px var(--color-grey-light);
    background-color: var(--color-red);
    color: var(--color-white);
}

.btn.btn-delete:disabled {
    background-color: var(--color-red);
    opacity: .5;
}



/* button with icon */

.btn.has-icon {
    width: var(--btn-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important; /* for safari insead of text-intend */
    background-color: var(--color-control-overlay-input);
    padding: unset;
    position: relative;
}

.btn.has-icon::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: var(--btn-height);
    height: var(--btn-height);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--icon-size);
    pointer-events: none;
}

/** button delete **/

.btn.has-icon.btn-delete::before {
    background-image: var(--icon-btn-delete);
    background-size: calc(var(--icon-size) - 4px);
}

.btn.has-icon.btn-delete:hover {
    background-color: var(--color-red) !important;
    filter: none;
}

/** button eye **/

.btn.has-icon.btn-eye::before {
    background-image: var(--icon-btn-eye);
}

/** button download **/

.btn.has-icon.btn-download::before {
    background-image: var(--icon-btn-download);
}

/** button add category item **/

.btn.has-icon.btn-assign::before {
    background-image: var(--icon-btn-plus);
    background-size: calc(var(--btn-edit-height) - 1rem);
}

.btn.has-icon.btn-assign.remove::before {
    background-image: var(--icon-btn-delete-file);
}

.btn.has-icon.btn-assign:hover {
    background-color: var(--color-white) !important;
    filter: invert(1);
}

.btn.has-icon.btn-assign.remove:hover {
    background-color: var(--color-red) !important;
    filter: none;
}

.btn.has-icon.btn-assign.remove:hover::before {
    filter: invert(1);
}



/** button media **/

.btn.has-icon.add-file::before {
    background-image: var(--icon-btn-add-file);
    background-position: calc(50% - 1.5px) calc(50% - 0.5px);
    background-size: calc(var(--icon-size) - 3px);
    filter: invert(1);
}

.btn.has-icon.add-directory::before {
    background-image: var(--icon-btn-add-directory);
    background-position: calc(50% + 1px) center;
    filter: invert(1);
}

.btn.has-icon.add-file:hover,
.btn.has-icon.add-directory:hover,
.btn.has-icon.add-category-item:hover,
.btn.has-icon.add-category-item:focus,
.btn.has-icon.add-file:active,
.btn.has-icon.add-directory:active,
.btn.has-icon.add-category-item:active   {
    background-color: var(--color-white);
    filter: invert(1);
}

/** button cancel **/

.btn.has-icon.btn-cancel,
.btn.has-icon.btn-edit,
.btn.has-icon.btn-eye,
.btn.has-icon.btn-download,
.media-item .btn.has-icon.btn-delete,
#showroom-control-panel-overlay .btn.has-icon.btn-delete {
    width: var(--icon-size) !important;
    height: var(--icon-size);
    border-radius: var(--border-radius-circle);
}

.btn.has-icon.btn-cancel::before {
    background-image: var(--icon-x-input);
    background-size: var(--layout-space-s);
}

body.layout--showroom .modal-container .btn.has-icon.btn-cancel {
    background-color: var(--color-grey-light);
}

body.layout--showroom .modal-container .btn.has-icon.btn-cancel::before,
body.layout--administration .btn.has-icon.btn-cancel::before {
    filter: invert(1);
}



/** button with icon specific **/

body.layout--administration button.btn.has-icon,
body.layout--showroom .modal-container button.btn.has-icon {
    background-color: var(--color-white);
}

.btn.has-icon.btn-edit,
.media-item .btn.has-icon.btn-delete {
    border: none;
    background-color: var(--color-grey-light);
}

.btn.has-icon.btn-edit::before {
    background-image: var(--icon-btn-edit);
}

.media-item .btn.has-icon.btn-delete::before,
#showroom-control-panel-overlay .btn.has-icon.btn-delete::before {
    background-image: var(--icon-btn-delete-file);
    background-size: auto;
}

.media-item .btn.has-icon.btn-delete:hover::before,
#showroom-control-panel-overlay .btn-delete::before {
    filter: invert(1);
}

.media-item .btn.has-icon {
    margin-left: var(--layout-padding-s);
}

#showroom-control-panel-overlay .media-item .btn.has-icon,
#showroom-control-panel-overlay .btn.has-icon.btn-delete {
    background-color: var(--color-control-overlay-input);
}

#showroom-control-panel-overlay .btn.has-icon.btn-delete:active,
#showroom-control-panel-overlay .btn.has-icon.btn-delete:focus {
    border: none !important;
    box-shadow: 0 0 0 2px var(--color-grey-dark);
    background-color: var(--color-red) !important;
}

#media-content-container .media-form-wrapper button {
    margin-left: var(--layout-padding);
    margin-right: 0;
}

#media-content-container .media-form-wrapper .btn.has-icon:not(:first-of-type) {
    margin-left: var(--layout-space-s);
}

#media-content-container .media-form-wrapper .btn.btn-cancel,
#category-content-wrapper .category-form-wrapper .btn.btn-cancel {
    background-color: var(--color-white);
}

#media-content-container .media-form-wrapper .btn.btn-cancel:hover,
#category-content-wrapper .category-form-wrapper .btn.btn-cancel:hover {
    background-color: var(--btn-grey-default);
}

#category-content-wrapper .category-form-wrapper .btn.btn-edit,
.user-add-wrapper .btn.btn-edit {
    width: max-content;
}

#category-content-wrapper .category-form-wrapper .btn.has-icon.btn-delete::before {
    filter: invert(1);
    background-size: calc(var(--icon-size) - 6px);
}

#category-content-wrapper .category-form-wrapper .btn.has-icon.btn-delete:hover::before,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:hover,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:active,
#showroom-control-panel-overlay .showroom-media-button-wrapper button:focus {
    filter: unset;
}

.showroom-showcase-list .btn.has-icon.btn-cancel,
#showroom-control-panel-overlay .form-action-container .btn.has-icon.btn-delete {
    width: var(--btn-height) !important;
    height: var(--btn-height);
    border-radius: var(--border-radius-small);
}

#showroom-control-panel-overlay .form-action-container .btn.has-icon.btn-delete::before {
    background-image: var(--icon-btn-delete);
    background-size: calc(var(--icon-size) - 4px);
    filter:unset;
}

#user-list-overview-table tbody td > a {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 var(--layout-padding);
    width: var(--btn-width);
    border-radius: var(--border-radius-small);
    transition: var(--transition);
    color: var(--color-black);
    font-size: var(--font-size-text-s);

    height: var(--btn-edit-height);
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    font-weight: 400;
    line-height: 1;
}

@media (max-width: 768px) {
    .btn.btn-edit,
    #user-list-overview-table tbody td > a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0 !important; /* for safari insead of text-intend */
        padding: unset;
        position: relative;
        border: none !important;
        background-color: var(--color-control-overlay-input) !important;
        width: var(--icon-size);
        height: var(--icon-size);
        border-radius: var(--border-radius-circle);
    }

    .btn.btn-edit::before,
    #user-list-overview-table tbody td > a::before {
        content: '';
        position: absolute;
        display: inline-block;
        width: var(--btn-height);
        height: var(--btn-height);
        background-repeat: no-repeat;
        background-position: center;
        background-size: var(--icon-size);
        pointer-events: none;
        background-image: var(--icon-btn-edit);
    }

    #category-content-wrapper .category-form-wrapper .btn.btn-edit,
    .user-add-wrapper .btn.btn-edit {
        padding: 0 var(--layout-padding);
        height: var(--btn-edit-height);
        background-color: var(--color-white) !important;
        border: 1px solid var(--color-grey) !important;
        border-radius: var(--border-radius-small);
        font-size: var(--font-size-text-s) !important;
    }

    #category-content-wrapper .category-form-wrapper .btn.btn-edit::before,
    .user-add-wrapper .btn.btn-edit::before {
        display: none;
    }
}