/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "colors";
@import "shared";

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: $cerulean;
  font-family: 'Raleway', sans-serif;
}

.clearfix {
  clear: both;
}

#nav-bar {
  background-color: $lead;

  .home-link {
    text-decoration: none;
    color: white;
    -webkit-transition : color .25s ease-in;
    -moz-transition : color .25s ease-in;
    -o-transition : color .25s ease-in;
    transition : color .25s ease-in;

    &:visited {
      color: white;
    }

    &:hover {
      color: $tangerine;
    }

    .title {
      margin: 0;
      text-align: center;
      font-size: 3rem;
      padding: .75rem 0;
    }
  }
}

#pagination {
  text-align: center;
  margin-top: 2rem;

  a {
    color: $main_black;
    text-decoration: none;
    background-color: white;
    padding: 20px;
    @extend .rounded;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    font-weight: bold;

    &.active {
      background-color: $tangerine;
      color: white;
    }
  }

  .page-links {
    a {
      font-size: 1.2rem;
      margin: 0 2px 0 2px;
    }

    #angle-left-link {
      background: white image-url("sail/angle-left.svg") center no-repeat;
      margin-right: 6px;
      padding: 20px 24px 20px 24px;
    }
  
    #angle-right-link {
      background: white image-url("sail/angle-right.svg") center no-repeat;
      padding: 20px 24px 20px 24px;
    }
  }
}

#profiles-modal {
  position: fixed;
  height: 50%;
  width: 50%;
  top: 25%;
  left: 25%;
  background-color: white;
  z-index: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  @extend .rounded;
  @extend .fade-in;
  text-align: center;
  padding: 15px;
  overflow: scroll;

  h1 {
    margin-left: 35px;

    #response-message {
      float: right;
      font-size: 18px;
      margin-right: 3px;
      position: relative;
      top: 5px;
      min-width: 50px;
      min-height: 20px;
      color: $dark_green;
    }
  }

  .profile-entry {
    padding: 10px;
    font-size: 20px;
    border-bottom: 2px solid transparent;
    margin-bottom: 15px;
    @extend .border-transition;

    .inline-form {
      float: right;
    }

    button {
      float: right;
      margin-left: 5px;
      padding: 10px;
    }

    .entry-name {
      position: relative;
      top: 10px;
      @media (max-width: 1199px) { float: left; }
      @media (min-width: 1200px) { margin-left: 250px; }
    }

    .active-indicator {
      float: left;
      position: relative;
      top: 7px;

      &.yellow {
        color: $light_yellow;
      }

      &.green {
        color: $light_green;
      }
    }
  }

  #new-profile-input {
    height: 100%;
    border: none;
    font-size: 20px;
    width: 90%;
    font-family: 'Raleway', sans-serif;
    position: relative;
    top: 10px;

    &:focus {
      outline: none;
    }
  }
}

hr {
  border: 0;
  height: 1px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}