/* This file is for your main application css. */


@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600|IBM+Plex+Sans:400,500');
$purple: #4A365F;
$grey-dark: #3d4449;

$family-primary: Montserrat, sans-serif;

$text: $grey-dark;
$text-light: lighten($text, 20%);
$text-strong: darken($text, 5%);

$link: lighten($purple, 10%);
$link-visited: darken($purple, 5%);
$link-hover: lighten($purple, 30%);
$link-focus: $link-hover;
$link-active: $link-hover;
$primary: $link;

$footer-background-color: $link;
$footer-padding: 2rem 1.5rem 2rem;

@import "../node_modules/bulma/bulma.sass";
@import "libs/_mixins";
@import "libs/_ribbon";
@import "errors";

html {
  background-attachment: fixed, fixed;
  background-image: asset_url("overlay.png"), asset_url("paper_fibers.png");

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  #wrapper {
    position: relative;
    flex: 1;
  }

  body,
  input,
  select,
  textarea {
    line-height: 1.35em;
  }

  footer {
    color: #fff;

    a {
      color: findColorInvert($primary);
    }

    strong {
      color: #fff;
    }
  }

  .purple-bg {
    background-color: $link;
    color: #fff !important;
  }

  .purple {
    color: $link-hover;
  }

  .title {
    font-family: 'IBM Plex Sans', serif;
    font-weight: 500;
    &.fancy {
      padding-bottom: 10px;
      border-bottom: 5px solid $link-hover;
    }
    &.thin {
      font-weight: 400;
    }
  }

  .subtitle {
    font-family: 'IBM Plex Sans', serif;
  }

  .burger {
    color: $grey-dark;
  }

  .navbar-item {
    font-size: 1em;
  }

  .controls {
    box-sizing: initial !important;
  }

  .box {

    &.company {
      min-height: 350px;
      max-height: 350px;
      overflow-y: auto;

      background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

        /* Shadows */
        radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
      background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,

        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

      background-repeat: no-repeat;
      background-color: white;
      background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

      /* Opera doesn't support this in the shorthand */
      background-attachment: local, local, scroll, scroll;

      .content {
        position: relative;
        .company-actions-wrapper {
          position: absolute;
          top: 0;
          right: 0;

          &.show {
            .company-actions {
              display: inline-block;
            }
          }

          .toggle-company-actions {
            cursor: pointer;
          }

          .company-actions {
            display: none;
            position: absolute;
            width: 140px;
            top: 25px;
            right: 0;
            background: white;
            box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
              0 0 0 1px rgba(10, 10, 10, 0.1);
            z-index: 3;
            border-radius: 3px;

            a {
              color: $grey-darker;
              display: block;
              text-align: left;
              padding: 5px;

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

              &:first-child {
                margin-top: 10px;
              }

              &:last-child {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }

    .company-info {
      padding: 10px 0px;
      border-bottom: 1px solid $grey-lighter;
      border-top: 1px solid $grey-lighter;
    }

    .company-description {
      padding-bottom: 20px;
    }

  }

  form {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@include until($tablet) {
  .navbar-end {
    border-top: 1px solid $grey-dark;
  }
  .select{
    display:inline-block;
    max-width:100%;
    select{
      width: 100%;
    }
  }

  .field.is-grouped {
    display: block;

    .control {
      display: inline-block;

      .navbar-item {
        display: inline-block;
        width: 100%;
        text-align: left;
        border: none;
        padding: 0.5rem 0.75rem;
      }
    }

    .locales {
      margin: 0.5rem 0.75rem;
    }
  }
}

.has-image-centered {
  margin-left: auto;
  margin-right: auto;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer;
}