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

* {
  font-family: 'Open Sans', sans-serif;
}

.title {
  font-family: 'Montserrat', sans-serif;
}

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: $cerulean;
}

.clearfix {
  clear: both;
}

.clear-xs {
  @media (max-width: 413px) {
    clear: both;
    margin-top: 8px;
  }
}

#nav-bar {
  background-color: $lead;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.1);

  .home-link {
    @extend .color-transition;

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

  .nav-button {
    float: right;
    position: relative;
    bottom: 50px;
    font-size: 20px;
    outline: none;
    background: transparent;
    border: none;
    @extend .color-transition;

    &:hover {
      cursor: pointer;
    }

    @media (max-width: 991px) { display: none; }
  }

  #btn-guide {
    right: 70px;
    padding: 0;
    margin: 0;
    @media (min-width: 1200px) { right: 110px; }
  }

  #btn-monitor-mode,
  #btn-regular-mode {
    right: 80px;
    padding: 1px 7px 2px 7px;

    @media (min-width: 1200px) { right: 120px; }
  }
}

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

.modal {
  position: fixed;
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;
  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;
  padding: 15px;
  overflow: scroll;

  @media (max-width: 1200px) {
    width: 90%;
    left: 3%;
  }

  @media (max-width: 767px) {
    width: 90%;
    left: 1%;
  }
}

#profiles-modal {
  @extend .modal;
  text-align: center;

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

    .inline-form {
      @media (max-width: 767px) {
        margin-right: 3%;
      }

      &:first-child {
        @media (max-width: 767px) {
          clear: both;
        }
      }
    }

    .entry-name {
      position: relative;
      top: 10px;

      @media (max-width: 767px) {
        width: 90%;
        margin-bottom: 15px;
      }

      @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%;
    position: relative;
    top: 10px;
    text-overflow: ellipsis;

    &:focus {
      outline: none;
    }

    @media (max-width: 1200px) { width: 88%; }
    @media (max-width: 767px) { width: 70%; }
  }
}

#guide-modal {
  @extend .modal;

  h1 {
    text-align: center;
  }

  details {
    padding: 15px;

    summary {
      font-size: 20px;
      outline: none;
      border-bottom: 1px solid transparent;
      @extend .border-transition;

      div {
        padding-bottom: 10px;
      }

      label {
        color: darken($aluminium, 30%);
        font-size: 18px;
        float: right;
      }

      img {
        display: none;
      }

      &::-webkit-details-marker {
        display: none;
      }

      &:hover {
        cursor: pointer;
      }

      &:focus {
        border-color: transparent;
      }
    }

    p, .items-container {
      text-align: center;
      font-size: 20px;

      ul {
        list-style-type: none;

        li {
          padding: 10px;
        }
      }
    }
  }

  details[open] {
    summary {
      border-bottom: 1px solid $tangerine;

      div {
        font-size: 28px;
        text-align: center;
      }

      label {
        display: none;
      }

      img {
        display: block;
        height: 20px;
        width: 20px;
        float: left;
        position: relative;
        top: 10px;
      }
    }

    p, p ~ * {
      @extend .fade-in;
    }
  }
}

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