ngscheurich/fresh-pots

@import "tachyons";
@import "animate";
@import "ReactToastify";
@import "icons/nucleo";
@import "icons/icons";
@import "variables";
@import "extensions";

body {
  font-family: $sans-serif;
}

.pattern-1 {
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.08' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

.gradient-1 {
  background: #222;
  background: linear-gradient(to bottom right, #222, #111);
}

.emoji {
  vertical-align: middle;

  &--big {
    font-size: 2em;
    margin-right: 5px;
  }
}

.btn {
  background: #4821a8; // Fallback color
  background: -webkit-linear-gradient(top left, #4821a8, #c44ad8);
  color: #fff;
  transition: all 0.2s;

  &:hover {
    opacity: 0.8;
    transform: scale(1.03);
  }
}

.toastify-content {
  @extend .aa;

  border-radius: 2px;
  font-family: $sans-serif;
  padding-left: 10px;
}

.toastify__close {
  font-size: 0;
  font-weight: 400;

  &::before {
    content: "×";
    font-size: 18px;
  }
}

.burger {
  height: 18px;
}

input[type="file"] {
  border: 0;
  padding-left: 0;
}

label.required:after {
  content: "*";
}

.logo {
  &__image {
    height: 30px;
  }

  &__text {
    line-height: 30px;
    transform: translateY(-4px);
  }
}

.avatar {
  height: 30px;
}

select {
  background: calc(100% - 15px) center / 16px no-repeat #fff
    url(/assets/minimal-down.svg);

  @extend .pa3;
  @extend .input-reset;
  @extend .ba;
  @extend .b--black-20;
  @extend .br1;
  @extend .w-100;
}

label {
  @extend .db;
  @extend .lh-copy;
  @extend .f5;
  @extend .f4-l;
  @extend .ttu;
  @extend .fw7;
  @extend .mb1;
}

.is-frosted {
  filter: blur(2px);
}

.turbolinks-progress-bar {
  background-color: #4821a8;
}

@media screen and (min-width: 30em) {
  .logo {
    &__image {
      height: 45px;
    }

    &__text {
      line-height: 45px;
      transform: none;
    }
  }

  .avatar {
    height: 45px;
  }
}

@media screen and (min-width: 60em) {
  .whats-fresh {
    font-size: 4rem;
  }
}

@media screen and (min-width: 80em) {
  .whats-fresh {
    font-size: 5rem;
  }
}

@media screen and (max-width: 30em) {
  .brew {
    &__meter,
    &__details {
      width: 100% !important;
    }

    &__meter {
      border-radius: 0.5rem 0.5rem 0 0 !important;
    }

    &__details {
      border-radius: 0 0 0.5rem 0.5rem !important;
    }
  }
}

#breakfast-status-bar {
  // display: none !important;
}