@import "hof-frontend-toolkit/assets/stylesheets/app.scss";
@import "./alert.scss";
@import "./icons.scss";
@import "./validation.scss";


.phase-banner {
  @include phase-banner(beta);
}

#step {
  @include core-16;
  a {
    display: inline-block;
    margin-top: $gutter-half;
    padding-left: 14px;
    border-bottom: $black 1px solid;
    color: $black;
    text-decoration: none;
    background: url("../images/icons/icon-caret-left.png") no-repeat 0 4px;
    @include media(mobile) {
      background-position: 0 1px;
    }
    margin-right: 14px;
  }

  span {
    display: inline-block;
    margin-top: $gutter-half;
    color: $secondary-text-colour;
  }
}

h1 {
  @include bold-24;
}

.form-label-bold {
  @include core-19;
}

//autocomplete styling
.tt-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 65%;
}

.tt-suggestion {
  padding: 0.5em;

  &:hover,
  &.tt-cursor {
    color: #fff;
    background-color: #0097cf;
  }

  &:hover {
    cursor: pointer;
  }
}

.twitter-typeahead {
  width: 100%;
}

//custom form styling
.form-control {
  padding: 0.5em;

  @include media(desktop) {
    width: 65%;
  }
}

.form-group {
  margin-bottom: 15px;
}

// GOVUK Elements `.form-date` overrides
.form-date {
    border-left: none;
    padding-left: 0;

    label {
        @include core-19();
    }

    .form-group {
        input {
            &[id$="-year"] {
                width: 70px;
            }
        }
    }
}

#delivery-details {
  width: 100%;
}


.table-details {
  width: 100%;
  margin-bottom: 3em;

  tbody {
    td {
      white-space: pre-wrap;
    }
    td:nth-child(1) {
      width: 20%;
    }
    td:nth-child(2) {
      width: 60%;
    }
    td:nth-child(3) {
      text-align: right;
      padding-right: 0;
    }
  }

  .button {
    margin: 0;
    background: #dde0e1;
    color: #000;
  }
}

.input-code {
  width: 25%;
}

select.address {
  margin: 0 0.6em 0 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #aaa;
  font-family: "nta",Arial,sans-serif;
  font-size: 19px;
  line-height: 1.31579;
  font-weight: 400;
  text-transform: none;
  display: block;
  width: auto;
}

span.postcode {
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 0.5em;
}

#address-textarea {
  height: 6em;
}