// Revenues Subpage Steps
//
// Diving Graphics and associated steps
//
// Styleguide blocks.how-it-works.subpage_steps

$onshore-oil-primary-color: #534136;
$onshore-oil-secondary-color: #c5403c;
$offshore-oil-primary-color: #b3e4f9;
$offshore-oil-secondary-color: $blue;
$coal-primary-color: #534136;
$coal-secondary-color: #c5403c;
$minerals-primary-color: #534136;
$minerals-secondary-color: #c5403c;
$offshore-renewables-primary-color: #534136;
$offshore-renewables-secondary-color: #0b92ce;
$onshore-renewables-primary-color: #579469;
$onshore-renewables-secondary-color: $blue;

@import 'subpage_diving_graphics';

.revenues_subpage-dyk {
  border-radius: $base-border-radius;
  margin-bottom: $base-padding;
  overflow: hidden;
  position: relative;
  z-index: 3;

  @include respond-to(medium-up) {
    display: block;
    margin-top: 40%;

    @include span-columns(2);

    &[aria-expanded=true] {
      @include span-columns(3);
    }
  }
}


.revenues_subpage-dyk_heading,
.revenues_subpage-dyk_text,
.revenues_subpage-dyk_text p,
.revenues_subpage-dyk_text ul, {
  @include heading('para-sm');
}

.revenues_subpage-dyk_heading {
  background-color: $offshore-oil-secondary-color;
  color: $white;
  font-weight: $weight-bold;
  margin: 0;
  padding: ($base-padding / 1.7);
  padding-left: $base-padding;
  text-align: left;
}

.revenues_subpage-dyk_text {
  background-color: $white;
  margin: 0;
  padding: $base-padding;
  padding-bottom: $base-padding-extra;
}

.revenues_subpage_dyk-link {
  bottom: $base-padding-lite;
  font-size: 12px;
  position: absolute;
  right: $base-padding;

  span,
  &::after {
    line-height: $base-line-height;
    padding-left: $base-padding-lite;
    vertical-align: bottom;
  }
}


.revenues_subpage-steps_group {
  padding-bottom: $base-padding;

  p {
    @include heading('para-md');
    padding-right: $base-padding-lite;

    @include respond-to(medium-up) {
      padding-left: 56px;
    }

    @include respond-to(medium-down) {
      margin-top: $base-padding-lite;
    }
  }

  ul {
    @include heading('para-md');
    @include respond-to(medium-up) {
      padding-left: 76px;
    }
  }

  @include respond-to(medium-up) {
    padding-bottom: 6.225em; // 100px twice $base-padding-extra;

    @include direction-context(right-to-left) {
      @include span-columns(7);
    }
  }

  @include respond-to(huge-up) {
    padding-right: 0;
  }

}


.revenues_subpage-steps_group_item {
  background-color: $white;
  margin-bottom: 4px;
  padding: $base-padding;
  z-index: 3;

  a {
    @extend .link-active;
  }

  &:first-of-type {
    border-radius: $base-border-radius $base-border-radius 0 0;
  }

  &:last-of-type {
    border-radius: 0 0 $base-border-radius $base-border-radius;

    .accordion-button {
      margin-top: 0;
    }
  }

  &.revenues_subpage-steps_long {


    .revenues_subpage-steps_number {
      vertical-align: text-bottom;

      @include respond-to(tiny-up) {
        vertical-align: baseline;
      }
    }

    .break {
      display: block;

      @include respond-to(tiny-up) {
        display: inline-block;
      }
    }
  }
}

.revenues_subpage-steps_heading {
  padding-right: $base-padding;
}

.revenues_subpage-steps_heading,
.revenues_subpage-steps_heading_more {
  @extend .revenues_steps-heading;

  display: inline-block;
  margin: 0;
}

.revenues_subpage-steps_heading_more {
  margin-left: 56px;
}

.revenues_subpage-steps_number {
  @extend .revenues_steps-number;

  border: 2px solid $gray-light;
  margin-right: 8px;
  padding-left: 11px;
}
