/**
 * The purpose of this file is to show best practice for SCSS and BEM in ODS.
 * Comments are plentiful because of this, but rarely necessary in actual components.
 *
 * Make sure to only @use from system and the component itself if SCSS is split into multiple files
 */
@use "system/breakpoints";
@use "system/colors";
@use "system/icon-map";
@use "system/typography";
@use "system/spacing";
@use "system/units";
@use "sass:map";

/**
 * The default styling for the component must be for the small breakpoint.
 * Pay attention to the ordering of the styles.
 * 1. Main class styles
 * 2. Child element styles
 * 3. Modifiers
 */
.ods-example-component {
  /**
   * 1. Main class styles
   */

  /**
   * 2. Child element styles
   */
  &__header {
    background-color: colors.$white;
    display: flex;
  }

  /**
  * Even though logo is a child of the header in the HTML markup it is not reflected in the BEM code.
  * Nested elements are written as if they were level 1 elements, direct children of the main class.
  */
  &__logo {
    @extend %ods-padding-horizontal-8, %ods-padding-vertical-5;

    width: 100%;
    line-height: 0;

    /**
     * Padding is overridden for the large breakpoint.
     * Extending is not possible inside mixins so use spacing values directly.
     */
    @include breakpoints.large {
      padding: units.unit-to-rem(8) !important;
    }

    svg {
      fill: colors.$blue-dark;
      max-width: 130px;
      line-height: 0;

      @include breakpoints.large {
        max-width: 160px;
      }
    }
  }

  &__picture {
    max-width: 110px;
    line-height: 0;

    @include breakpoints.large {
      max-width: 142px;
    }

    img {
      width: 100%;
      object-fit: cover;
    }
  }

  &__content {
    @extend %ods-padding-8;

    background-color: colors.$beige;
  }

  &__heading {
    @extend %ods-margin-bottom-8;
    @extend %ods-text--size-foxtrot;
    @extend %ods-text--weight-medium;
  }

  &__text {
    @extend %ods-text--size-juliett;
  }

  &__footer {
    background-color: colors.$white;
    display: flex;
    align-items: center;
    position: relative;
    height: 100px;

    &::after {
      background-color: colors.$yellow;
      border-radius: 50%;
      content: "";
      display: block;
      height: 100px;
      right: 0;
      position: absolute;
      top: 0;
      width: 100px;
    }

    /**
     * If by chance a naming conflict occurs in a component where mulitple areas share the same name and
     * it cannot be resolved by renaming, use specificity to resolve the situation.
     * Class resolves to: .ods-example-component__footer .ods-example-component__text
     *
     * ::before showcase the use of icon in sass. Notice the margin-left calculation in the parent
     * component whose purpose is to create enough space for the icon even when the font-size is
     * scaled in the browser.
     */
    .ods-example-component__text {
      @extend %ods-text--size-lima;

      margin-left: calc(#{units.unit-to-rem(8)} + 1.3em);

      &::before {
        font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
        content: map.get(icon-map.$icons, "check-big") !important;
        text-align: center;
        position: absolute;
        left: 30px;
      }
    }
  }

  /**
   * 3. Modifiers
   *
   * Adding some modifiers to make the component in different colors
   */
  &--green-light {
    .ods-example-component__content {
      background-color: colors.$green-light;
    }
  }

  &--red-light {
    .ods-example-component__content {
      background-color: colors.$red-light;
    }
  }

  &--blue-light {
    .ods-example-component__content {
      background-color: colors.$blue-light;
    }
  }
}