// Masthead Uplift styles
// ==========================================

.masthead-appname,
.masthead .toolbar-section.title h1 {
  @include font-size(14);

  color: $ids-color-palette-slate-10;
  margin: 0 14px;
}

.masthead .masthead-icon > .icon {
  border-radius: 4px;
  margin-inline-start: 6px;
}

.masthead .flex-toolbar .toolbar-section {
  .masthead-icon > .icon {
    margin: 0 6px;
  }

  &.title h1 {
    margin: 0 6px;
  }
}

.masthead .toolbar .buttonset > *:not(.toolbar-searchfield-wrapper) {
  height: 26px;
  margin: 4px;
  min-height: 26px;
  padding: 0 8px;

  &.btn-menu {
    margin-right: -6px !important;
    margin-top: 3px;
  }

  .icon {
    color: $ids-color-palette-slate-40;
  }
}

.masthead .toolbar-searchfield-wrapper:not(.active) .icon:not(.close):not(.icon-dropdown) {
  top: -2px;
}

.masthead .toolbar.has-title,
.masthead .formatter-toolbar.has-title {
  padding: 0 8px;
}

// Image in masthead corrections
.masthead .image-initials,
.masthead .image-round {
  line-height: 28px;
}

.masthead .toolbar-searchfield-wrapper.active .searchfield {
  height: 32px !important;
}

.masthead .toolbar-searchfield-wrapper.is-open .icon:not(.close) {
  top: -2px !important;
}

// Reset toolbar buttons hover
html[class*='theme-new-'] .masthead .flex-toolbar:not(.editor-toolbar):not(.formatter-toolbar):not(.contextual-toolbar) .toolbar-section [class^='btn']:not(:disabled):not(.searchfield-category-button),
.masthead .toolbar:not(.standalone) .buttonset [class^='btn']:not(.searchfield-category-button) {
  border-radius: 2px;

  &:not(:disabled):hover {
    background-color: transparent !important;
  }

  &.is-open {
    background-color: transparent !important;
  }
}

.masthead .toolbar:not(.standalone) .searchfield-wrapper.toolbar-searchfield-wrapper:not(.has-categories):not(.is-open) {
  &:hover {
    background-color: transparent !important;
  }

  &.is-open {
    background-color: transparent !important;
  }
}