@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-checkout {
  padding: 10px 0 40px 0;

  .title {
    display: block;
    @include font-style($font-serif, 400, $font-32);
    color: $black;
    height: 50px;
  }

  .subtitle {
    display: block;
    @include font-style($font-sans, 700, $font-16);
    color: $gray;
    height: 40px;
  }

  .toggle-login,
  .toggle-logout {
    color: $brown;
    cursor: pointer;
  }

  .login-form {
    display: none;
    padding-top: 50px;
    width: 80%;
    margin: auto;
  }

  .label {
    display: block;
    @include font-style($font-sans, 700, $font-16);
    color: $gray;
    padding: 15px 0 5px 0;
  }

  .item,
  .total {
    @include font-style($font-sans, 400, $font-16);
    color: $gray;
    padding: 20px 10px;
    border-bottom: 1px solid $gray;

    .name {
      display: block;
      @include font-style($font-serif, 500, $font-22);
      color: $brown;
      margin-bottom: 2px;
    }

    .description {
      display: block;
      font-size: $font-14;
    }
  }

  .total {
    border: none;
    font-weight: 700;
    padding: 20px 10px;
  }

  .place {
    @include font-style($font-sans, 400, $font-16);
    color: $gray;
    padding: 0 10px;

    .link {
      padding: 0;
      background: none;
      font-weight: 700;
      color: $brown;
    }

    .place-order {
      display: inline-block;
      @include font-style($font-serif, 'regular', $font-20);
      margin: 20px 0 0 auto;
    }
  }

  .input {
    &.error {
      border: 1px solid $red;
    }

    &:disabled  {
      opacity: .5;
    }
  }

  .different-address {
    display: none;
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-checkout {
    .item {
      padding: 20px 0;
    }
    .place {
      padding: 0;
    }
    .total {
      padding: 20px 0;
    }
  }
}