@import "style-tile";

//------------------------------------//
// Magesparrow - Theme Settings       //
//-----------------------------------//
// Do not remove this.
@import "magesparrow-theme";
//-----------------------------------//

@import "modules/buttons";

.SG-sections {
  > .SG-section {
    &:nth-child(odd) {
      background: #F5F7F6;
    }
  }
}

.SG-section {
  padding: spacers(3);

  @include respond-to-up(lg) {
    padding: spacers(4);
  }

  @include respond-to-up(xxl) {
    padding: spacers(5);
  }

  &__title {
    font-size: 18px;
  }

  &__content {}
}

.SG-section__title + .SG-section__content {
  padding: spacers(3) 0;

  @include respond-to-up(lg) {
    padding: spacers(4) 0;
  }

  @include respond-to-up(xxl) {
    padding: spacers(5) 0;
  }
}

.SG-col {
  &__heading {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: spacers(2);

    @include respond-to-up(lg) {
      margin-bottom: spacers(3);
    }

    @include respond-to-up(xxl) {
      margin-bottom: spacers(4);
    }
  }

  &__content {}

  .message--show {
    margin-bottom: 1rem;
  }

  .message-close {
    padding: 0;
  }
}
.SG-two-cols {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  @include respond-to-up(lg) {
    justify-content: space-between;
  }

  .SG-col {
    width: 100%;
    margin-bottom: spacers(3);

    @include respond-to-up(lg) {
      width: 45%;
      margin-bottom: 0;
    }
  }
}

.SG-buttons {}

.SG-buttons-row {
  padding: spacers(2);
  margin-bottom: spacers(3);
  background: #F5F7F6;

  @include respond-to-up(lg) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
    background: transparent;
    margin-bottom: 0;
  }

  &--header {
    display: none;

    @include respond-to-up(lg) {
      display: flex;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: bold;
    }
  }

  > .SG-buttons-col {
    width: 100%;

    @include respond-to-up(md) {
      width: 20%;
    }

  }

  &:not(.SG-buttons-row--header) > .SG-buttons-col {
    opacity: 0.4;

    &:not(:first-child) {
      font-size: 12px;
    }

    &:nth-child(1) {
      margin-bottom: spacers(3);
    }

    &:nth-child(1),
    &:nth-child(3) {
      opacity: 1;
    }
  }
}

.SG-buttons-col {
  margin-bottom: spacers(1);

  pre {
    padding: 6px;
    border-radius: 4px;
    display: block;
    border: 1px solid gray;
    font-size: 11px;
    background: #F5F7F6;
  }
}

.SG-colours {

}

.SG-colour {
  display: inline-block;
  width: 135px;
  height: 200px;
  margin-right: spacers(3);
  vertical-align: top;

  &__value {
    display: block;
    height: 135px;
    background: white;

  }

  &__label {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    justify-content: center;
    height: calc(200px - 115px);
    font-size: 11px;
    padding: spacers(2);
    background: white;
  }
}

.SG-col__content .form {
  background: #fff;
  padding: spacers(3);
  max-width: 700px;
  margin: 0 auto;

  @include respond-to-up(lg) {
    padding: spacers(4);
  }

  @include respond-to-up(xxl) {
    padding: spacers(5);
  }
}

form .SG-section__title  {
  margin-bottom: spacers(3);
}

// Utils
.SG-header-font {
  font-size: 16px;
  font-family: $font-family-heading;
  font-weight: $headings-font-weight;
  word-wrap: break-word;

  @include respond-to-up(lg) {
    font-size: 32px;
  }
}

.SG-header-font-name {
  position: relative;

  &:after {
    content: '#{$font-family-heading}';
  }
}

.SG-body-font {
  font-size: 30px;
  word-wrap: break-word;
  font-family: $font-family-base;
  font-weight: $font-weight-base;
}

.SG-body-font-name {
  &:after {
    content: '#{$font-family-base}';
  }
}

