@import 'bourbon';
@import 'neat';
@import 'us_web_design_standards';
@import 'fonts';

$color-black: #000000;
$caseflow-background: #f9f9f9;

html,
body {
  min-height: 100%;
}

body {
  padding-bottom: 70px;
  background: $caseflow-background;
}

a:visited {
  color: $color-primary; // Override USWDS
}

.cf-success {
  color: $color-green;
}

.cf-error {
  color: $color-secondary-dark;
}

label {
  font-weight: normal !important;
  margin-top: 0; // Override USWDS
}

p {
  margin-top: rem(20px);
  margin-bottom: rem(20px);
}

.cf-doc-embed {
  width: 100%;
  height: 80vh;
}

.cf-notice {
  padding: 8px 20px;
  text-align: center;
  background-color: $color-primary;
  color: $color-white;

  a {
    color: $color-white;
    text-decoration: underline;
  }
}

//----------------------------------*
// Globals, Resets, and overrides
//-----------------------------------*/

.cf-txt-c {
  text-align: center;
}

.cf-txt-r {
  text-align: right;
}

.cf-txt-l {
  text-align: left;
}

.cf-txt-uc {
  text-transform: uppercase;
}

.cf-txt-example {
  font-style: italic;
  color: $color-gray;
  vertical-align: middle;
}

// Use cf-push-row to wrap elements that float to the left or right
.cf-push-row {
  @include clearfix;
}

.cf-push-left {
  float: left;
}

.cf-push-right {
  float: right;
}

abbr {
  border: 0;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  &:not(.usa-alert-heading) {
    font-family: inherit;
    margin-top: 0;
  }
}

[hidden] {
  display: none;
}

legend {
  display: table; // Causes legend text to wrap in IE
  font: inherit;
  white-space: normal;
}

[disabled],
[readonly] {
  background: $color-gray-lightest !important;
  opacity: .5 !important;
}

dd {
  margin-left: 0;
}

.cf-pos-fixed {
  position: fixed;
}

//------------------------------------
// Icons
//-----------------------------------*/

[class|=cf-icon] {
  display: inline-block;
  height: .8em; // Should be an em
  margin: 0 .1ex;
}

.cf-icon-missing {
  vertical-align: -.15ex;
  width: .8em;

  path {
    fill: $color-secondary-dark;
  }
}

.cf-icon-found {
  width: 1em;

  path {
    fill: $color-green;
  }
}

.cf-icon-close {
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;

  path {
    fill: $color-gray-light;
  }

  &:hover {
    path {
      fill: $color-gray-dark;
    }
  }
}

.cf-icon-success--bg {
  background: image-url('icons/icon-check.svg') bottom no-repeat;
  background-size: auto 2rem;
  display: inline-block;
  height: 3rem;
  width: 3rem;
}

//--- Appeal button ---*/

.cf-apppeal-id {
  box-sizing: border-box;
  background: transparent;
  border: 2px solid $color-gray;
  color: $color-gray;
  padding: 1rem;

  &:hover {
    color: $color-white;
    background: $color-gray;
    border-bottom: 2px solid $color-gray;

    path {
      fill: $color-white;
    }
  }
}

.cf-icon-appeal-id {
  display: inline-block;
  margin-left: .25rem;
  vertical-align: -1px;
}

//------ Dropdowns --------*/
.cf-dropdown {
  $large-screen: em(640) !default;
  display: inline-block;
  position: relative;

  a {
    color: inherit;
  }
}

.cf-dropdown-trigger {
  cursor: pointer;
  background-color: $color-white;

  &::after {
    // CG: This image doesn't appear to exist in any repo (9/20/16)
    background: image-url('arrow-down.svg') 50% 100% no-repeat;
    background-size: 100% 100%;
    content: ' ';
    display: inline-block;
    height: 1rem;
    margin-left: 1rem;
    width: 1rem;
  }

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

// Quick fix to property count lint
%overlay {
  background: $color-white;
  z-index: 1;
  position: absolute;
}

.cf-dropdown-menu {
  @include unstyled-list();
  @include transition (all 0.2s ease-in-out);
  @extend %overlay;
  border: 1px solid $color-gray-lighter;
  box-shadow: 0 0 10px -3px $color-gray;
  cursor: pointer;
  display: none;
  text-align: left;
  top: 2em;
  width: 18rem;
  padding: rem(10px) rem(20px);

  &.active {
    display: block;
  }

  a {
    display: block;
  }

  li {
    padding: rem(10px) 0;

    &:last-child {
      border-top: 1px solid $color-gray-lighter;
    }
  }
}

//------ Modals --------*/


// don't trip the accessibility warning for white on white, even if title isn't visible
svg title {
  color: $color-black;
}

.cf-modal {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: none;

  &.active {
    display: block;
  }

  &::before {
    content: ' ';
    background: rgba($color-black, .4);
    position: fixed;
    height: inherit;
    width: inherit;
  }
}

.cf-modal-body {
  @include transform(translateY(-50%));
  top: 50%;
  // Previous two lines vertically center this block
  background: $color-white;
  box-shadow: 0 0 2rem -3px rgba($color-base, .8);
  color: $color-gray;
  padding: 4.5rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1040px;
  width: 70%;
}

.cf-modal-title {
  font-size: rem(50px);
  text-align: center;
}

.cf-modal-close {
  background: transparent;
  height: 1.5rem;
  padding: .1rem;
  position: absolute;
  right: rem(20px);
  top: rem(20px);
  width: 1.5rem;

  &:hover,
  &:focus,
  &:active {
    background: transparent;

    path {
      fill: $color-gray-dark;
    }
  }
}


.cf-modal-text,
.cf-modal-controls {
  margin: auto;
  width: 70%;
}

.cf-modal-text {
  font-size: rem(20px);
  line-height: 2;
  text-align: center;
}

.cf-modal-controls {
  position: relative;
  bottom: 0;
  margin-top: rem(60px);
}

// ===========================*
// Application navigation bar  *
// ============================*/
.cf-nav {
  background: $color-white;
  color: $color-gray;
  margin: 0;
  padding: rem(30px) 0;
  position: relative;
  border-bottom: 1px solid $color-gray-lighter;

  .usa-grid-full {
    position: relative;
  }
}

.cf-nav-dropdown {
  position: absolute;
  right: 0;
}


.cf-nav-whatsnew {
  &::after {
    color: $color-secondary-dark;
    content: '\00A0\2605';
    display: inline-block;
    font-size: 1.25rem;
    vertical-align: 2px;
  }

  &:hover::after {
    color: $color-secondary;
  }
}

.cf-header-link:hover {
  h1 { color: $color-gray-light; }
  text-decoration: none;
}

.cf-logo {
  color: $color-gray-dark;
  margin-right: rem(10px);
  font-size: 1.7rem;
  display: inline;
}

.cf-logo-image {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: .5em;
  height: 32px;
  width: 32px;
  background-size: 32px;
}

.cf-application-title {
  font-size: 1.7rem;
  font-weight: normal;
  display: inline;
}

.cf-app-screen {
  margin: auto;
  width: 90%;
}

.cf-name-header {
  font-size: 3rem;
  margin-bottom: 0;
}

//.cf-app-segment represents a chunk of an application's
// page Should be an immediate child of .cf-app. Avoid
// making .cf-app-segment a grandchild element of .cf-app.
.cf-app-segment {
  // Clearfix
  &::before,
  &::after {
    content: ' ';
    display: block;
    clear: both;
  }

  &--alt {
    background: $color-white;
    border: 1px solid $color-gray-lighter;
    padding: rem(30px);
  }

  // Make the top margin larger whenever
  // cf-app-segment is the first-child
  &:first-child {
    margin-top: rem(40px);
  }
}

// Adds top margin when .cf-app-segment
// is preceded by an element
* + .cf-app-segment {
  margin-top: rem(30px);
}

.cf-layout-3-up {
  border: 1px solid $color-gray-lighter;
  display: table;
  width: 100%;

  > * {
    display: table-cell;
    padding: 1.5rem;
    vertical-align: middle;
    width: 33%;
  }

  > *:nth-child(even) {
    border-left: 1px solid $color-gray-lighter;
    border-right: 1px solid $color-gray-lighter;
  }

  &-title {
    color: $color-gray;
    font-weight: inherit;
  }

  &-text {
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 1rem;
  }
}

.cf-app-footer {
  @include clearfix;
  border-top: 1px solid $color-gray-lighter;
  margin-top: rem(55px);
  width: 100%;

  > * {
    padding-top: rem(55px);
  }

  p {
    margin: 0;
  }
}


//-----------------------------------*
// CSS based on Web Design Guidelines.
// - Uses Neat.bourbon.io as a grid
// - Uses patterns and components
//   from refills.bourbon.io/unstyled/
//-----------------------------------*/

//===========================
// Tooltip
// =========================*/

.cf-tooltip {
  display: inline-block;
  position: relative;
}

.cf-tooltip-trigger {
  &:hover + .cf-tooltip-text {
    display: block;
  }
}

.cf-tooltip-text {
  @include transform(translateX(-50%));
  background: $color-white;
  box-shadow: 0 0 10px -3px $color-gray;
  display: none;
  left: 50%;
  margin-top: rem(10px);
  padding: rem(10px);
  position: absolute;
  width: rem(300px);

  &::before {
    @include transform(scaleX(1.2));
    color: $color-white;
    content: '\25B2';
    display: block;
    font-size: rem(15px);
    text-align: center;
    text-shadow: 0 -2px 2px rgba($color-gray, .5);
    margin-top: rem(-25px);
    position: relative;
    z-index: -1;
  }
}

//===========================
// Form controls
// =========================*/

input,
[type="text"],
[type="email"],
[type="password"],
[type="url"],
[type="tel"],
[type="number"],
[type="search"],
[type="file"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"],
textarea,
select,
[type="checkbox"] + label,
[type="radio"] + label {
  margin-bottom: 0;
}

// Overrides USWDS */
textarea {
  max-width: 100% !important;
}

// Overrides USWDS */
form {
  max-width: none !important;
}

.hidden-field {
  display: none;
}

//------ Buttons --------*/
// I hate using !important, but web design standards
// form buttons have high specificity.
// Keep an eye on https://github.com/18F/web-design-standards/issues/891
[type="submit"],
[type="button"],
.usa-button {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: rem(20px);

  &:last-child {
    margin-right: 0 !important;
  }
}

// Make a button look like a link */
.cf-btn-link {
  background: transparent;
  color: $color-primary;
  display: inline-block;
  font-weight: normal;
  line-height: 1;
  // I hate using !important, but web design standards
  // form buttons have high specificity.
  // Keep an eye on https://github.com/18F/web-design-standards/issues/891
  -webkit-font-smoothing: inherit;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;

  &:visited {
    color: $color-primary;
  }

  // Removes padding, so that these links can be placed inline.
  &--inline {
    padding: 0 !important;
  }

  &:hover {
    background-color: inherit;
    color: $color-primary-darker;
    text-decoration: underline;
  }

  &--confirm {
    &:visited {
      color: $color-secondary-dark;
    }

    color: $color-secondary-dark;
    font-weight: bold;
  }

  &--cancel {
    display: inline-block;
    font-weight: bold;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


.cf-btn-help {
  background: transparent;
  margin: 0;
  padding: 0;

  &:hover {
    background: transparent;
  }
}

//--- Table styles ---*/
.cf-table-wrap {
  width: 100%;
  overflow-x: auto;

  table {
    min-width: rem(400px);
    width: 100%;
  }
}

// Overrides table th, table td classes
// from web design standards
.cf-table-borderless {
  th,
  td {
    border-width: 0;
  }

  tr {
    border-bottom: 2px solid $color-gray-lightest;
  }
}

//------ Dropdowns --------*/
.cf-dropdown {
  $large-screen: em(640) !default;
  display: inline-block;

  a {
    color: inherit;
  }
}

.cf-dropdown-trigger {
  cursor: pointer;
  background-color: $color-white;

  &::after {
    // CG: This image doesn't appear to exist in any repo (9/20/16)
    background: image-url('arrow-down.svg') 50% 100% no-repeat;
    background-size: 100% 100%;
    content: ' ';
    display: inline-block;
    height: 1rem;
    margin-left: 1rem;
    width: 1rem;
  }

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

// Quick fix to property count lint
%overlay {
  background: $color-white;
  z-index: 1;
  position: absolute;
}

.cf-dropdown-menu {
  @include unstyled-list();
  @include transition (all 0.2s ease-in-out);
  @extend %overlay;
  border: 1px solid $color-gray-lighter;
  box-shadow: 0 0 10px -3px $color-gray;
  cursor: pointer;
  display: none;
  text-align: left;
  top: 2em;
  width: 18rem;
  padding: rem(10px) rem(20px);

  &.active {
    display: block;
  }

  a {
    display: block;
  }

  li {
    padding: rem(10px) 0;

    &:last-child {
      border-top: 1px solid $color-gray-lighter;
    }
  }
}

// ===========================*
// Form-related states
// ============================*/

.required {
  strong,
  b {
    &::after {
      content: '* ';
      color: $color-secondary-dark;
      font-family: inherit;
      font-weight: bold;
      font-style: normal;
    }
  }

  &-msg {
    @extend .usa-input-error-message;

    &::before {
      content: '* ';
    }
  }
}

.cf-form {
  header {
    border-bottom: 1px solid $color-gray-lighter;
    margin-bottom: rem(30px);
  }

  .cf-btn-forward {
    display: inline-block;
    margin-right: 0;
  }
}

.cf-required {
  color: $color-secondary;
}

.cf-subtext {
  color: $color-gray;
}

.cf-characters-left {
  color: $color-gray;
  font-size: 0.9em;
  font-style: italic;
  height: 1em;
}

.cf-loading-indicator {
  display: none;
  background-color: $color-white;
  border-radius: 5px;
  padding: 0.4rem 2.7em;
  svg { vertical-align: middle; }
}

.cf-is-loading {
  .cf-submit {
    display: none;
  }

  .cf-loading-indicator {
    display: block;
  }
}

fieldset {
  margin-top: rem(20px);
  margin-bottom: rem(20px);

  > *,
  .cf-form-textinput {
    margin-bottom: 0;
  }
}

* + .cf-form-textinput {
  @include clearfix;
  margin-top: rem(20px);
  margin-bottom: rem(20px);
}

.cf-form-textarea {
  clear: both;
  max-width: rem(455px);
}

// Wrapping element for each option */
.cf-form-radio-options {
  @include clearfix;
  margin-top: rem(10px);
}

.cf-form-radio-option {
  @include clearfix;
  margin-bottom: rem(20px);

  label {
    margin-bottom: 0 !important;
  }
}

.cf-form-radio-inline {
  .cf-form-radio-option {
    float: left;
    padding-right: rem(30px);
    margin-bottom: 0;
  }
}

.cf-form-checkboxes.usa-grid-full {
  margin-bottom: 0;
}

.cf-form-checkboxes,
.cf-form-cond-req {
  margin-top: rem(20px);
  margin-bottom: rem(20px);
}

.cf-form-checkbox {
  &:not(:last-child) {
    margin-bottom: rem(10px);
  }
}

.usa-input-error {
  [type="radio"] + label::before {
    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-secondary-dark, 0 0 3px 4px $color-secondary, 0 0 7px 4px $color-secondary-dark;
  }
}

//========================
// Certified success page
//==========================*/
.cf-app-msg-screen {
  color: $color-gray;
}

.cf-msg-screen-heading {
  font-size: rem(52px);
  margin-bottom: 1rem;
  text-align: center;
}

// "deck" is newspaper speak for "subhead"
.cf-msg-screen-deck {
  text-align: center;
  font-size: rem(20px);
  font-weight: normal;
  color: $color-gray;
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
  // TODO: Refactor h1,h2,h3,h4,h5,h6 { &:not(.usa-alert-heading)}
  // so that we don't have to use !important here.
  margin-bottom: rem(65px) !important;
  margin-top: rem(15px) !important;
  width: 65%;
}

.cf-msg-screen-text {
  width: 65%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cf-list-checklist {
  list-style-type: none;
  margin: 5rem auto 6.5rem;
  position: relative;
  width: 50%;

  li::before {
    content: '';
  }

  .cf-icon-success--bg {
    font-size: 2.5rem;
    margin-right: 1.8rem;
  }
}

.cf-login-input {
  display: inline !important;
}

[id=username_input_id] ~ .cf-txt-example {
  margin-left: rem(20px);
}

//------------------------------
// Help page
// -------------------------------
[id=help-page] {
  dt {
    font-weight: bold;
    font-size: 1.1em;
    margin: 3rem auto 0;
  }

  p {
    margin-top: 0;
  }

  img {
    box-shadow: 0 0 20px -5px rgba($color-black, .5);
    clear: both;
    display: block;
    margin: 2rem;
    max-width: 60rem;
    height: auto;
  }
}

.cf-help-image-wrapper {
  text-align: center;
}

.cf-help-image {
  max-width: 50%;
  height: auto;
}

//---------------------------
// Date picker overrides
//----------------------------*/
.ui-datepicker {
  background: $caseflow-background;
  box-shadow: 0 0 30px rgba($color-base, .8);

  &-header {
    background: $color-gray;
    color: $color-white;
    text-align: center;
    padding: 1rem;
    position: relative;
    width: 100%;
  }

  &-title {
    font-weight: bold;
  }

  &-prev,
  &-next {
    color: $color-white;
    cursor: pointer;
    font-size: .85em;
    line-height: 1.6;
    position: absolute;

    &:hover {
      color: $color-white;
    }
  }

  &-prev {
    left: 1rem;
  }

  &-next {
    right: 1rem;
  }

  &-calendar {
    margin: 0;

    th {
      background: $color-gray-light;
      color: $color-gray-dark;
      padding: 1rem;
      border-color: $color-gray;

      &:first-child {
        border-left-color: $color-gray-light;
      }

      &:last-child {
        border-right-color: $color-gray-light;
      }
    }

    td {
      background: $caseflow-background;
      border-color: $color-gray-light;
      padding: 0;
      text-align: right;
    }

    .ui-state-default {
      display: block;
      padding: 1rem;
    }
  }
}

.cf-icon-missing {
  vertical-align: -.45ex;
  width: .8em;
  height: 1em;

  path {
    fill: $color-secondary-dark;
  }
}

.cf-icon-found {
  vertical-align: -.45ex;
  width: 1em;
  height: 1em;

  path {
    fill: $color-green;
  }
}

.cf-icon-alert {
  margin-right: .25em;
  vertical-align: -.25ex;
  width: 1em;
  height: 1em;

  path {
    fill: $color-secondary;
  }
}

.icon-loading-front {
  @include animation(backwardspin 9s linear infinite);
}

.icon-loading-back {
  @include animation(spin 9s linear infinite);
  margin-left: -33px;
}

@include keyframes(spin) {
  from {
    @include transform(rotate(0deg));
  }

  to {
    @include transform(rotate(360deg));
  }
}

@include keyframes(backwardspin) {
  from {
    @include transform(scale(1) rotate(-30deg));
  }

  to {
    @include transform(scale(1) rotate(-390deg));
  }
}

@import 'tabs';
@import 'stats';