// ==========================================================================
// TOOLS / #MIXINS
// ==========================================================================

//
// Clearfix mixin
//
// Usage: @include clearfix();
// See utilities/clearfix
//

@mixin clearfix() {
  &:after {
    clear: both;
    content: '';
    display: block;
  }
}

//
// Reading width mixin, add a maximum width
// to large pieces of content
//
// Usage: @include reading-width();
// See utilities/reading-width
//

@mixin reading-width() {
  max-width: 44em;
}

//
// Visually hidden mixin, used for hiding
// content visually but keeping it in the DOM
//
// Usage: @include visually-hidden();
// See utilities/visually-hidden
//

@mixin visually-hidden() {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

//
// Visually shown mixin, used for displaying
// content visually that has previously been hidden
// by visually-hidden
// Differences between mobile and desktop views
// Use $display-property to assign display
//
// Usage: @include visually-shown(table-header-group);
//

@mixin visually-shown($display-property) {
  clip: auto;
  -webkit-clip-path: initial;
  clip-path: initial;
  display: $display-property;
  height: auto;
  overflow: auto;
  position: relative;
  width: auto;
}

//
// Top and bottom margin mixin, remove
// the top and bottom margin spacing
//
// Usage: @include top-and-bottom();
// See utilities/top-and-bottom
//

@mixin top-and-bottom() {
  & > *:first-child {
    margin-top: 0;
  }
  & > *:last-child {
    margin-bottom: 0;
  }
}

//
// Panel mixin
//
// Usage: @include panel-with-label($color_dfe-blue, $color_dfe-white);
// See components/_panel
//

@mixin panel($panel-background-color, $panel-text-color) {

  @include top-and-bottom();
  @include dfe-responsive-margin(7, 'bottom');
  @include dfe-responsive-margin(7, 'top');
  @include dfe-responsive-padding(5);

  background-color: $panel-background-color;
  color: $panel-text-color;

  @include mq($media-type: print) {
    border: 1px solid $dfe-print-text-color;
    page-break-inside: avoid;
  }

}

//
// Panel with label mixin, inherits panel styling
// and removes padding top for the label positioning.
//
// Used in-conjunction with @mixin heading-label
//
// Usage: @include panel-with-label($color_dfe-blue, $color_dfe-white);
// See components/_warning-component
//

@mixin panel-with-label($panel-background-color, $panel-text-color, $panel-border-color) {
  @include panel($panel-background-color, $panel-text-color);

  border: 1px solid $panel-border-color;
  padding-top: 0 !important;  /* stylelint-disable-line declaration-no-important */
}

//
// Heading label mixin, adds a tab heading to
// warning callout, do and don't lists and panel.
//
// Used in-conjunction with @mixin panel-with-label
//
// Usage: @include heading-label($color_dfe-blue, $color_dfe-white);
// See components/_warning-component
//
// 1. Background colour to be set on the @include.
// 2. Text colour to be set on the @include.
// 3. Display inline-block so it does not take up the full width.
// 4. Margin -24px left and right aligns the heading to the box.
// 5. Top positioning set to minus to make the heading
//    sit just outside the box.
//

@mixin heading-label($heading-background-color, $heading-text-color) {
  @include dfe-typography-responsive(24);

  background-color: $heading-background-color; // [1] //
  color: $heading-text-color; // [2] //
  display: inline-block; // [3] //
  margin: dfe-spacing(0) dfe-spacing(0) dfe-spacing(2) -33px;
  padding: dfe-spacing(2) dfe-spacing(5);
  position: relative;
  top: -16px; // [5] //

  @include mq($until: tablet) {
    margin-left: -25px;
    margin-right: 0;
    padding: dfe-spacing(2) dfe-spacing(4);
    top: -8px; // [5] //
  }

  @include mq($media-type: print) {
    background: none;
    color: $color_dfe-black;
    top: 0;
  }
}

//
// Care card mixin, used for creating
// different coloured care cards.
//
// Usage: @include care-card($color_dfe-blue, $color_dfe-white, 4px);
// See components/card/card
//

@mixin care-card($heading-background-color, $heading-text-color, $print-border-size) {

  .dfe-card--care__heading-container {
    background-color: $heading-background-color;
    color: $heading-text-color;
  }

  @include mq($media-type: print) {
    border: $print-border-size solid $dfe-print-text-color;
    color: $dfe-print-text-color;
    page-break-inside: avoid;
  }
}

//
// Print colour mixin, sets the text print colour
// warning callout, do and don't lists and panels.
//
// Usage: @include print-color($dfe-print-text-color);
// See components/_care-card
//

@mixin print-color($print-color) {

  @include mq($media-type: print) {
    color: $print-color;
    fill: $print-color;

    &:active,
    &:focus,
    &:visited {
      color: $dfe-print-text-color;
    }

  }

}

//
// Print hide mixin, hides the element from print.
//
// Usage: @include print-hide();
// See components/_care-card
//

@mixin print-hide() {

  @include mq($media-type: print) {
    display: none;
  }

}

//
// Flex mixin
// Usage: @include flex();
//

@mixin flex() {
  display: flex;
  flex-wrap: wrap;
}

//
// Flex item mixin
// Usage: @include flex-item();
//

@mixin flex-item() {
  display: flex;

  @include mq($until: desktop) {
    flex: 0 0 100%;
  }

}

//
// Toggle button mixin
// used to toggle content
//
// Usage: @include toggle-button();
// See components/header
//
// 1. Remove inner border on buttons for Firefox, see
//    https://github.com/necolas/normalize.css/issues/393
// 2. !important overrides focus style border: 0;
//

@mixin toggle-button() {
  background-color: transparent;
  border: 1px solid $color_dfe-white;
  color: $color_dfe-white;
  cursor: pointer;


  &::-moz-focus-inner {
    border: 0; // [1] //
  }

  &:hover {
    background-color: $color_shade_dfe-blue-35;
    border-color: $color_dfe-grey-5;
    box-shadow: none;
  }

  &:focus {
    border: 1px solid $dfe-focus-color !important; /* stylelint-disable-line declaration-no-important */ /* [2] */
  }

  &:active,
  &.is-active {
    background-color: $color_shade_dfe-blue-50;
    border-color: $color_dfe-grey-5;
    color: $color_dfe-grey-5;
  }

}

//
// Close button mixin
// used to close a content area
//
// Usage: @include close-button();
// See components/header
//
// 1. Custom height and width of form items
// 2. Custom height and width of svg icons
// 3. Remove inner border on buttons for Firefox, see
//    https://github.com/necolas/normalize.css/issues/393
//

@mixin close-button() {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  height: 40px; // [1] //
  padding: 0;
  width: 40px; // [1] //

  .dfe-icon__close {
    fill: $color_dfe-blue;
    height: 40px; // [2] //
    width: 40px; // [2] //
  }

  &::-moz-focus-inner {
    border: 0; // [3] //
  }

  &:hover {
    .dfe-icon__close {
      fill: $dfe-secondary-button-hover-color;
    }
  }

  &:focus {
    @include dfe-focused-text;
  }

}

//
// Remove margin mobile mixin, removes left and right
// margin at tablet breakpoint.
//

@mixin remove-margin-mobile() {
  @include mq($until: tablet) {
    margin-left: -$dfe-gutter-half;
    margin-right: -$dfe-gutter-half;
  }
}


@mixin dfe-logo-size {
  height: 90px;
  width: 153px;
}

@mixin dfe-logo-size-small {
  height: 60px;
  width: 100px;
}