/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
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 *;

iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
    outline: units(1px) dotted color('blue-40v');
    outline: units(1px) auto color('blue-40v');
    outline-offset: 0.3rem;
}

.usa-header--extended {
   .usa-logo {
      font-family: family("sans");
      margin: units(3) 0;
      @include at-media-max('desktop') {
         margin: units(4) 0 units(4) units(2);
      }
      a {
         display: flex;
          img {
            height: 35px;
            @include at-media('desktop') {
               height: 60px;
            }
         }
      }
   }
   .usa-nav__secondary {
      .usa-nav__link {
         padding: 0;
         &.usa-current {
            text-decoration: underline;
         }
      }
      @include at-media-max('desktop') {
         padding: 0 units(2);
         ul li {
            padding-bottom: units(1);
         }
      }
   }
   .usa-nav-container {
      max-width: 100%;
      padding: 0;
   }
}

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

.usa-nav__primary {
   &> .usa-nav__primary-item > a {
      font-size: size("body", 5);
      font-weight: 400;
      cursor: pointer;
   }
}

h1 {
   font-weight: bold !important;
}

.usa-section--dark h1 {
   color: color('blue-30v');
   @include at-media-max('desktop') {
      font-size: size("body", 12);
   }
}

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;
   margin-bottom: units(2);
   @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: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 1rem;
 }

 .user-list-item {
   @include at-media(desktop) {
     width: calc(50% - units(1));
     margin-bottom: 1rem;
     box-sizing: border-box;
   }
   .user-list-item-heading .live-search-relevant {
      display: block;
      word-wrap: break-word;
    }

   border: 1px solid color('gray-cool-10');
   padding: units(2);

   .tick-cross-list-permissions {
     margin: units(1) 0;
     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;
}

.template-list-item-hidden-by-default {
   display: 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 {
      .big-number-smaller {
         display: flex;
         flex-direction: column;
         .big-number-number {
               font-size: units(5);
               line-height: units(5);
         }
         .big-number-label {
               font-size: units(2.5);
         }
      }
      .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);
      }
   }
   .table-wrapper {
      overflow-x: scroll;
   }
}

.dashboard-table {
   table {
      width: 100%;
   }
   .file-list-filename {
      font-weight: bold;
   }
   .file-list-hint {
      margin: 0;
      word-break: break-word;
   }
   .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;
   }
}

.job-table {
   width: 100%;
   border-collapse: collapse;
   td.file-name {
      width: 25%;
      overflow-wrap: anywhere;
   }
   td.template {
      width: 20%;
   }
   td.time-sent {
      width: 20%;
   }
   td.sender {
      width: 15%;
   }
   td.count-of-recipients {
      width: 5%;
   }
   td.report {
      width: 5%;
   }
   th {
      padding: 0.5rem 1rem
   }
   td {
      padding: 0.5rem 1rem
  }
}

#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;
}

.edit-textbox-error-mt {
   margin-top: 1.5rem;
}

// Login page

#countdown-container {
   display: none; // Hide the countdown timer
}

.placeholder, .placeholder-conditional {
   background-color: #face00;
   border: 1px solid #face00;
   border-radius: 7px;
}