/* See `.combobox-clear-button` for an example of this mixin in use */
@mixin icon($icon) {
  @extend .fa;
  @extend .fa-#{$icon}:before;
}

/* Main page layout: header, content, footer */
body {
  background: $body-background;
  color: $black;
  font-family: $font-family;
  font-size: 14px;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: $header-font;
  font-style: normal;
  font-weight: lighter;
  text-rendering: optimizelegibility;
  color: $primary-color;
  margin-top: 10px;
  margin-bottom: 15px;
}

h1 {
  width: 65%;
  font-size: 40px; 
}
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }

hr { 
  color: $primary-color;
  border-color: $primary-color;
  background-color: $primary-color;
}

.hidden { visibility: hidden; }
.inline { display: inline-block; }
.centered { text-align: center; }
.left-indent { margin-left: 15px; }
.right-indent { margin-right: 15px; }
.top-indent { margin-top: 25px; }

.highlight-color-button {
  background-color: $highlight-background-color;
  color: $highlight-color;
}

.right {
  position: absolute;
  top: 15px;
  right: 10px;
}

.bordered { 
  border: 1px solid $primary-color; 
  border-radius: 3px;
  padding: 15px 10px;
}

ul.no-bullets {
  list-style: none;
  padding-left: 0;
}

/* This class will ensure that the item is hidden for sighted users and that it does not take up space */
/* For example:  <h2 aria-hidden="false" class="aria-only"><%= _('Create account') %></h2> */
/* will be read on a screen reader for a tabbed section that opens but will be hidden visually */
.aria-only {
  visibility: hidden;
  display: inline;
  height: 0;
  width: 0;
}

.fa {
  font-size: 18px;
  color: $black;
}

div.divider {
  height: 0;
  width: 100%;
  border-bottom: 1px solid $primary-color;
}

/* General dropdown menu styling */
.caret {
  display: inline-block;
  vertical-align: middle;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid $primary-color;
  border-bottom: $primary-color;
  width: 0;
  height: 0;
}
ul.dropdown-list {
  position: absolute;
  background-color: $medium-grey;
  color: $white;
  border-radius: 3px;
  padding: 10px 25px;
  text-align: left;
  z-index: 2;
  top: 0;
  right: 5px;
  margin-top: -5px;
  
  li {
    list-style: none;
    margin-bottom: 10px;
    padding: 6px 15px;
    
    a {
      color: $white;
    }
  }
  li.active, li:hover, li:focus {
    background-color: $dark-grey;
    border-radius: 3px;
  }
}
.dropdown-large { width: 200px; }
.dropdown-medium { width: 150px; }
.dropdown-small { width: 100px; }

[data-toggle='popover']{
  position: relative;
  
  .fa {
    font-size: 18px;
  }
}
div.popover-message {
  position: absolute;
  font-family: $font-family;
  font-size: 14px;
  color: $tooltip-color;
  background: $tooltip-background;
  border-radius: 3px;
  padding: 15px 20px;
  z-index: 10;
  a, a:hover, a:visited, a:focus,
  h1, h2, h3, h4, h5 {
    color: $white;
  }
}
.popover-left { top: -20px; right: 0; }
.popover-right { left: 0; }
.popover-large { width: 350px; }
.popover-medium { width: 250px; }
.popover-small { width: 150px; }

div.tooltip-message {
  position: absolute;
  top: 15px;
  width: 300px;
  background: $tooltip-background;
  color: $tooltip-color;
  padding: 6px 10px;
  border-radius: 3px;
  z-index: 9;
}

/* General Anchor and Button styling */
a, a:link, a:active, a:visited, a:hover, a:focus,
button.button-as-link, button.button-as-link:hover, button.button-as-link:focus {
  color: $primary-color;
}

button, button:hover, button:focus,
input[type="file"], input[type="file"]:hover, input[type="file"]:focus,
input[type="submit"], input[type="submit"]:hover, input[type="submit"]:focus,
a.link-as-button, a.link-as-button:link, a.link-as-button:active, a.link-as-button:visited, 
a.link-as-button:hover, a.link-as-button:focus {
  background-color: $primary-color;
  color: $white;
  font-size: 14px;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid $light-grey;
  border-radius: 5px;
}

.progress {
  position: absolute;
  top: $header-height;
  right: 0;
  margin-top: 25px;
  width: 350px;
  z-index: 2;
}

/* Basic page layout */
/* =================================================================================== */
div.roadmap {
  position: relative;
  width: 90%;
  margin: 0 auto;
  
  /* HEADER SECTION */
  /* ----------------------------------------------------- */
  header {
    background: $header-background;
    color: $header-text-color;
    height: $header-height;
    text-align: left;
    
    .header-left, .header-right, .signin-signout-menu {
      display: inline-block;
    }
    
    .header-left {
      height: $header-height;
      .home-logo {
        margin-right: 10px;
        /* margin-top: $header-logo-top-margin; */
        margin-left: $header-logo-left-margin;
        vertical-align: middle;
        
        img {
          width: $header-logo-width;
        }
      }
      .roadmap-logo {
        margin-top: 70px;
      }
    }
    .header-right {
      width: 80%;
      vertical-align: bottom;
      
      .org-branding {
        position: relative;
        display: inline-block;
        height: 60%;
        
        a {
          color: $header-text-color;
        }
        
        .header-org-banner-text {
          display: inline-block;
          width: 80%;
          vertical-align: bottom;
        }
      }
      .main-nav {
        height: 40%;
        margin-top: 5px;
        
        ul.nav {
          position: relative;
          padding-left: 0;
          margin: 0;
          
          li {
            position: relative;
            display: inline-block;
            color: $header-text-color;
            background-color: $primary-color;
            border: 1px solid $black;
            padding: 6px 10px;
            margin-bottom: -1px;
            font-size: 14px;
            list-style: none;
          
            a, a:visited, a:active, a:link, a:hover {
              color: $white;
              text-decoration: none;
              font-weight: bold;
              line-height: 20px;
            }
          }
          li.highlight-color-button {
            color: $highlight-color;
            background-color: $highlight-background-color;
          }
          li.active, ul li:hover {
            color: $primary-color;
            background-color: $white;
          
            a, a:visited, a:active, a:link, a:hover {
              color: $primary-color;
              text-decoration: none;
              font-weight: bold;
              line-height: 20px;
            }
          }
          #explore {
            padding-right: 15px;
            
            .caret {
              border-top: 4px solid $header-text-color;
              border-bottom: $header-text-color;
            }
          }
          #explore-dropdown {
            position: absolute;
            top: 12px;
            left: 5px;
            width: 150px;
            
            li {
              display: block;
              background-color: $medium-grey;
              border: none;
            }
            li.active, li:hover, li:focus {
              background-color: $dark-grey;
              border-radius: 3px;
              
              a {
                width: 100%;
                color: $white;
              }
            }
          }
        }
      }
    }
    .signin-signout-menu {
      position: absolute;
      top: 5px;
      right: 10px;
      color: $header-text-color;
      margin-top: 5px;
      
      a {
        color: $header-text-color;
        font-size: 14px;
        text-decoration: none;
      }
      a.link-as-button {
        color: $header-text-color;
        background-color: $header-background;
        border: 1px solid $black;
      }
      ul li a {
        color: $white;
      }
      .caret {
        border-top-color: $header-text-color;
        border-bottom-color: $header-text-color;
      }
    }
  }
  
  /* INFORMATION/ERROR MESSAGE BOX */ 
  div.roadmap-info-box, 
  div.roadmap-alert-box {
    position: relative;
    float: right;
    margin-top: 10px;
    padding: 8px 30px 10px 60px;
    border-radius: 5px;
    vertical-align: middle;
    width: auto;
    max-width: 65%;
    
    span {

    }
    .fa {
      position: absolute;
      top: 7px;
      left: 7px;
      background: transparent;
      font-size: 18px;
      margin-right: 15px;
      z-index: 99;
    }
  }
  div.roadmap-info-box {
    color: $notice-color;
    background: $notice-background;
    .fa {
      color: $notice-color;
    }
  }
  div.roadmap-alert-box {
    color: $error-color;
    background: $error-background;
    .fa {
      color: $error-color;
    }
  }
  
  /* MAIN CONTENT */
  /* ----------------------------------------------------- */
  main {
    clear: both;
    
    div.page {
      position: relative;
      width: 100%;
      background: $body-background;
      border-radius: 3px;
      
      div.content {
        background-color: $white;
        border-radius: 3px;
        padding: 10px 15px 25px 15px;
        
        /* By default, page content is one column, but use the below styles to create a 2 column style */
        div.column-left {
          display: inline-block;
          width: 55%;
        }
        div.column-right {
          display: inline-block;
          width: 40%;
          height: auto;
          margin-left: 35px;
          vertical-align: top;
        }
        
        /* Description Lists - Used to display the read-only version of forms */
        dl {
          width: 85%;
          margin: 0 auto;
          
          dt {
            display: inline-block;
            width: 25%;
            text-align: right;
            margin-right: 10px;
            margin-top: 10px;
            font-weight: bold;
          }
          dt:not(.dl-buttons):after {
            content: " :";
          }
          
          dd {
            display: inline-block;
            width: 65%;
          }
          dd:after {
            display: block;
            content: " ";
            margin-bottom: 10px;
          }
          dt.dl-buttons {
            margin-top: 25px;
          }
        }
      }
    }
  }
  
  /* FOOTER SECTION */
  /* ----------------------------------------------------- */
  footer {
    width: 100%;
    border-top: .5px solid $medium-grey;
    margin-top: 35px;
    
    .footer-left, .footer-right {
      display: inline-block;
    }
    
    .footer-left {
      width: 65%;
      
      p {
        color: $medium-grey;
      }
      
      ul.footer-links {
        padding-left: 0;
        
        li a {
          color: $medium-grey;
        }
        
        li {
          display: inline-block;
        
          a {
            text-decoration: none;
          }
        }
        li.muted {
          margin: 0 5px;
        }
      }
    }
    .footer-right {
      text-align: right;
      width: 30%;
    }
  }
}