//
// Settings
//

._settings {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: var(--headerZ);

  &._in { display: block; }

  > ._header { justify-content: space-between; }

  &._dirty > ._header {
    background: var(--noteGreenBackground);
    border-color: var(--noteGreenBorder);
  }
}

//
// Settings page
//

._settings-fieldset {
  display: -ms-flexbox;
  display: flex;
  margin: 1.5rem 0;
  line-height: 1.5rem;
}

._settings-legend {
  -ms-flex: 0 1 10rem;
      flex: 0 1 10rem;
  margin: 0;
  padding-right: .5rem;
  line-height: inherit;
  font-size: inherit;
  font-weight: var(--boldFontWeight);
  text-align: right;
  @extend %border-box;
}

._settings-inputs {
  -ms-flex: 1 1 20rem;
      flex: 1 1 20rem;
}

._settings-label {
  margin: 0 0 .375rem;

  > small {
    display: block;
    color: var(--textColorLight);
    margin-left: 1.75rem;
  }

  input[type=checkbox] {
    vertical-align: top;
    margin: .25rem .375rem;
  }
}

@media (max-width: 80rem) {
  ._setting-max-width { display: none; }
}

._setting-native-scrollbar { display: none; }
@supports (-webkit-margin-end: 1px) { ._setting-native-scrollbar { display: block; } }

//
// Settings buttons
//

._settings-btn {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.5rem;
  padding: 0 .75rem;
  font-size: .875rem;
  font-weight: var(--boldFontWeight);
  color: inherit;
  text-align: left;
  cursor: pointer;
  @extend %border-box;

  > svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .125rem;
    @extend %svg-icon;
  }
}

._settings-btn-back {
  ._dirty & { display: none; }
}

._settings-btn-save {
  display: none;

  ._dirty & { display: block; }
}

//
// Header tabs
//

._settings-tabs {
  display: none; // mobile only
  margin-right: .5rem;

  ._dirty & { display: none !important; }
}

._settings-tab {
  position: relative;
  vertical-align: top;
  padding: 0 .75rem;
  line-height: var(--headerHeight);
  color: var(--textColorLight);

  &.active {
    color: var(--textColor);
    font-weight: var(--boldFontWeight);
    box-shadow: inset 0 -2px var(--linkColor);
  }
}