@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 0;
    border-bottom: 1px solid $gray;
  }

  .total {
    border: none;
    font-weight: 700;
  }

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

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