.clickable-icon {
  transition: all 0.1s ease-in-out !important;
}

body:not(.is-mobile):not(.mod-windows:not(.windows-mode-off)) .workspace .clickable-icon {
  &:not([aria-disabled="true"]):hover,
  &.has-active-menu {
    box-shadow: var(--shadow-xs);
    background-color: var(--background-primary);
  }
}
.clickable-icon {
  padding: 4px 12px;
  min-width: 32px;
  min-height: 32px;
}
button:not(.clickable-icon) {
  padding: 4px 12px;
  box-shadow: none;
  border: none;
  font-weight: var(--font-normal);
  line-height: unset;
}

.input-right-decorator {
  padding: 2px 4px;
  min-height: unset;
}

body.is-mobile {
  button {
    box-shadow: none !important;
  }

  .clickable-icon {
    background-color: transparent;
    padding: 10px;

    &.is-active {
      opacity: 1;
      background-color: var(--interactive-accent);
      color: var(--text-on-accent);
    }

    &.mobile-tap {
      opacity: unset;
    }
  }
}

body.is-phone:not(.is-android:not(.material-off)) {
  button:not(.clickable-icon) {
    justify-content: flex-start;
    background-color: var(--interactive-normal);
    padding: 0 var(--side-padding);
    min-height: var(--input-height);
    color: var(--text-accent);
    font-weight: var(--font-normal);
    text-align-last: unset;
  }

  .setting-item-control button {
    color: var(--text-accent);
  }
}

body.is-tablet:not(.is-android:not(.material-off)) {
  button:not(.clickable-icon) {
    padding: 4px var(--side-padding);
  }
}
