/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
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;
   img {
      @include at-media($theme-header-min-width) {
         width: 80px;
         height: 70px;
      }
   }
}

.usa-nav__primary > .usa-nav__primary-item > a {
   font-size: size("body", 4);
}

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

.govuk-checkboxes__label::after {
   top: 13px;
   left: 9px;
   width: 22px;
   height: 11px;
}

.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before,
.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");
}

.govuk-inset-text {
   border-color: color("blue-40v");
}

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

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

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

.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);
      }
   }
   .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;
}