/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
   sass root. Don't edit the version
   in node_modules.
----------------------------------------
Custom project SASS goes here.

i.e.
@include u-padding-right('05');
----------------------------------------
*/

@use "uswds-core" as *;

.usa-header--extended .usa-logo {
   font-family: family("sans");
   margin: units(4) 0;
   @include at-media-max('mobile-lg') {
      margin: units(4) 0 units(4) units(2);
   }
   img {
      @include at-media($theme-header-min-width) {
         width: 80px;
         height: 70px;
      }
   }
}

.usa-banner__header-action {
   font-size: size("body", 2);
}

.usa-nav__primary {
   &> .usa-nav__primary-item > a {
      font-size: size("body", 4);
   }
   &> .usa-nav__primary-item:last-child {
      margin-left: auto;
      @include u-margin-right(-4);
   }
}

.usa-nav__primary


h1 {
   font-weight: bold !important;
}

p,
.list li {
   font-family: family("sans");
   font-size: size("body", 6);
}

.large-number {
   font-size: size("body", 16);
}

.show-more-no-border:focus,
.show-more:focus,
.table-field-right-aligned a:active:before,
.table-field-right-aligned a:focus:before {
   box-shadow: none !important;
}

.multiple-choice [type="radio"]:focus + label::before {
   box-shadow: 0 0 0 3px color("blue-40v");
}

.usa-dark-background .pill-item__container {
   color: #fff;
}

.pill-separate-item:link,
.pill-separate-item:visited {
   text-decoration: none;
   background: initial;
}

.template-footer .usa-link,
.template-content-count,
.table-empty-message,
td.table-empty-message {
   font-size: size("body", "sm");
}

.textbox-highlight-background,
.textbox-highlight-foreground,
.textbox-highlight-mask,
.textbox-highlight-textbox {
   font-size: units(2);
   line-height: 1.2;
   padding: units(1);
   font-family: family("sans");
}

.usa-dark-background .pill-item__label {
   color: white;
   text-decoration: none !important;
}

.pill-item.usa-link {
   text-decoration: none !important;
}

.button-flex-header {
   flex-direction: column;
   align-items: flex-start;
   @include at-media(desktop) {
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
}

.user-list-edit-link:active:before,
.user-list-edit-link:focus:before {
   box-shadow: none;
   border: 0;
}

.user-list {
   display: inline-flex;
   flex-wrap: wrap;
   gap: units(2);
   .user-list-item {
      @include at-media(desktop) {
         flex: 1 1 calc(50% - units(2));
      }
      flex: 1 1 calc(100% - units(2));
      border: 1px solid color('gray-cool-10');
      padding: units(2);
      .tick-cross-list-permissions {
         padding-left: units(2);
      }
      .hint {
         display: block;
         font-size: size("body", "sm");
         font-weight: normal;
      }
   }
}

.template-list-item-without-ancestors .template-list-folder:active,
.template-list-item-without-ancestors .template-list-folder:active::before,
.template-list-item-without-ancestors .template-list-folder:focus,
.template-list-item-without-ancestors .template-list-folder:focus::before,
.template-list-item-without-ancestors .template-list-template:active,
.template-list-item-without-ancestors .template-list-template:active::before,
.template-list-item-without-ancestors .template-list-template:focus,
.template-list-item-without-ancestors .template-list-template:focus::before {
   background-color: transparent;
   box-shadow: none;
}

.folder-heading a.folder-heading-folder,
.template-list-folder {
   background: url(../img/material-icons/folder.svg) no-repeat;
   padding-left: units(4);
   display: inline-block;
   background-position: 0;
}

.usa-checkbox .usa-checkbox__label {
   + a.template-list-folder {
      margin-left: units(4);
   }
}

.usa-checkbox__label-description {
   margin: units(2px) 0 units(1) units(4);
}

.folder-heading-folder {
   background: url(../img/material-icons/folder_open.svg) no-repeat;
   padding-left: units(4);
   display: inline-block;
   background-size: units(3) units(3);
   background-position: 0;
}

.message-name-separator:before, .folder-heading-separator:before {
   content: ">";
   margin: 0 units(0.5);
}

.template-list-template {
   background: url(../img/material-icons/description.svg) no-repeat;
   padding-left: units(4);
   display: inline-flex;
}

.js-enabled .live-search {
   display: flex;
   margin-bottom: units(2);
   .usa-form-group {
      @include u-width("mobile-lg");
   }
   input#search {
      width: 100%;
      border: 1px solid color("gray-60");
   }
}

.usa-hint {
   display: block;
}

.js-stick-at-bottom-when-scrolling {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   overflow: visible;
   button {
      margin-right: units(2);
   }
   .template-list-selected-counter {
      position: relative;
      top: 0;
   }
}

.sticky-template-form {
   margin: 0;
   border: 1px solid color("gray-cool-10");
   padding: units(2);
   &:focus {
      outline-offset: units(1);
   }
}

.spark-bar-bar {
   font-size: units(2);
   background-color: transparent;
}

.usa-hero {
   background-image: none;
}

.usa-prose {
   h1, h2, h3, h4, h5 {
      font-family: family("sans");
   }
}

.usa-section {
   &__home {
      h2 {
         font-family: family("serif");
      }
   }
}

.navigation-service.usa-breadcrumb {
   -bottom: 0;
}

// Dashboard

.dashboard {
   .big-number-with-status {
      a {
         background: color("blue-60v");
         padding: units(2);
         margin-bottom: units(1);
         text-decoration: none;
         &:hover{
            background: color("blue-warm-70v");
         }
      }
      span {
         color: white;
      }
      .big-number-smaller {
         display: flex;
         flex-direction: column;
         .big-number-number {
               font-size: units(5);
               line-height: units(6);
         }
         .big-number-label {
               font-size: units(3);
         }
      }
      .big-number-status {
         background: color("green-cool-40v");
         display: flex;
         padding: units(1) units(2);
         &--failing {
            padding: 0;
            a.usa-link {
               color: white;
               background: color("red-warm-50v");
               padding: units(1) units(2);
               margin: 0;
               width: 100%;
               &:hover {
                  background: color("red-warm-60v");
               }
            }
         }
      }
   }
   .usa-table {
      width: 100%;
      caption {
         margin-bottom: 0;
      }
      .table-field-center-aligned  {
         text-align: center;
      }
      .template-statistics-table-template-name {
         padding-left: units(4);
         display: inline-block;
         background-repeat: no-repeat;
         background-image: url(../img/material-icons/description.svg);
      }
   }
}

.dashboard-table {
   table {
      width: 100%;
   }
   .file-list-filename {
      font-weight: bold;
   }
   .file-list-hint {
      margin: 0;
   }
   .table-field, .table-field-right-aligned {
      width: 50%;
   }
   &.usage-table {
      .table-field, .table-field-left-aligned, .table-field-right-aligned {
         width: auto;
      }
   }
}

.usage-table {
   ul {
      list-style: none;
      padding: 0;
      margin: 0;
   }
   .big-number-smallest {
      display: flex;
      flex-direction: column;
   }
}

#template-list {
   max-height: 500px;
   overflow-y: auto;
   padding: units(1) 0 units(1) units(1);
   margin: units(2) 0 units(5);
   ul {
      padding: 0;
      margin: 0;
      list-style: none;
   }
}

// Tabs

.tabs {
   .pill {
      display: flex;
      list-style: none;
      padding: 0;
      .pill-item__container {
         border: 1px solid color("gray-cool-10");
         flex: 1;
         display: flex;
         flex-direction: column;
         text-align: center;
         font-size: units(2);
         a {
            padding: units(4);
            .big-number-smaller {
               font-size: units(5);
               line-height: units(6);
            }
            .big-number-smallest {
               font-size: units(3);
            }
            &:not(.pill-item--selected):hover {
               background: color("blue-warm-70v");
            }
            &.pill-item--selected:hover {
               color: color("blue-60v");
            }
         }
      }
   }
}

// Etc

.email-brand, .browse-list {
   padding: 0;
   margin: 0;
   list-style: none;
   margin-bottom: units(2);
   li {
      padding: 8px 0;
   }
}

details form {
   box-sizing:border-box;
}

// Textbox highlight

.textbox-highlight {

  &-wrapper {
      position: relative;
  }

  &-textbox {
      resize: none;
      z-index: 20;
      background: none;
  }

  &-textbox,
  &-background,
  &-foreground,
  &-mask {
      font-size: units(2);
      display: block;
      box-sizing: border-box;
      position: relative;
      padding: 4px;
      overflow: hidden;
      line-height: 1.6;
  }

   &-background {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      color: transparent;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-wrap: break-word;
      border: 2px solid transparent;
      padding-bottom: units(3);
      z-index: 10;

    // transparent borders become visible in high contrast modes so set to match background
    @media (-ms-high-contrast: active), (forced-colors: active) {
      border-color: Canvas;
    }

    .placeholder,
    .placeholder-conditional {
         background-color: #fff;
         position: relative;
         &:after {
            content: "";
            background-color: color("yellow-20v");
            border: 1px solid color("yellow-20v");
            display: block;
            position: absolute;
            top: 0;
            left: 5px;
            right: 6px;
            height: 100%;
            border-radius: 7px;
         }
    }

  }
}

.textbox-help-link {
  margin: 10px 0 0 0;
}

.textbox-right-aligned {
  text-align: right;
}

.extra-tracking .usa-input {
  font-size: units(2);
  padding-left: 5px;
  letter-spacing: 0.04em;
}