/* Main layout */
body {
  margin: 20px 10px;

  @media (min-width: $size-sm) {
    // Horizontal padding accounts for checkboxes that show up in bulk edit mode
    margin: 20px 32px;
  }
}

header {
  margin-bottom: $unit-10;

  .logo {
    width: 28px;
    height: 28px;
  }

  a:hover {
    text-decoration: none;
  }

  h1 {
    margin: 0 0 0 $unit-3;
    font-size: $font-size-lg;
  }
}

header .toasts {
  margin-bottom: 20px;

  .toast {
    margin-bottom: 0.4rem;
  }

  .toast a.btn-clear:visited {
    color: currentColor;
  }
}

/* Shared components */

// Content area component
section.content-area {
  h2 {
    font-size: $font-size-lg;
  }

  .content-area-header {
    border-bottom: solid 1px $border-color;
    display: flex;
    flex-wrap: wrap;
    column-gap: $unit-6;
    padding-bottom: $unit-2;
    margin-bottom: $unit-4;

    h2 {
      flex: 0 0 auto;
      line-height: 1.8rem;
      margin-bottom: 0;
    }

    .header-controls {
      flex: 1 1 0;
      display: flex;
    }
  }
}

// Confirm button component
span.confirmation {
  display: flex;
  align-items: baseline;
  gap: $unit-1;
  color: $error-color !important;

  svg {
    align-self: center;
  }

  .btn.btn-link {
    color: $error-color !important;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Additional utilities */

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-sm {
  font-size: 0.7rem;
}

.text-gray-dark {
  color: $gray-color-dark;
}

.align-baseline {
  align-items: baseline;
}

.align-center {
  align-items: center;
}

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

.mb-4 {
  margin-bottom: $unit-4;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.btn.btn-wide {
  padding-left: $unit-6;
  padding-right: $unit-6;
}

.btn.btn-sm.btn-icon {
  display: inline-flex;
  align-items: baseline;
  gap: $unit-h;

  svg {
    align-self: center;
  }
}