/**
* Mixin to reset elements standard styles.
*/

@mixin reset-text {
  padding: 0;
  margin: 0;
}

@mixin reset-list {
  padding: 0;
  margin: 0;
  list-style: none;

  > li {
    margin: 0;
  }
}

@mixin reset-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  &:focus,
  &:focus-visible {
    outline: none;
  }
}

@mixin reset-button {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;

  &:focus {
    outline: none;
  }
}

@mixin reset-figcaption {
  display: block;
  padding: 0;
  margin: 0;
}

@mixin reset-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;

  // Fallback for broken images
  &::before {
    @include text-x-small;

    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: $color-black;
    content: attr(alt);
    background-color: $color-gray-warm;
  }
}

@mixin reset-input {
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  color: inherit;
  background: none;
  border: 0;
  appearance: none;

  &[type='submit'] {
    cursor: pointer;
  }

  &[type='text'] {
    &::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }

    &::-ms-reveal {
      display: none;
      width: 0;
      height: 0;
    }
  }

  /* clears the ‘X’ from Chrome */
  &[type='email'],
  &[type='search'] {
    &::-webkit-search-decoration {
      display: none;
    }

    &::-webkit-search-results-button {
      display: none;
    }

    &::-webkit-search-cancel-button {
      display: none;
    }

    &::-webkit-search-results-decoration {
      display: none;
    }
  }

  &[type='number'] {
    appearance: textfield;
  }

  &:focus {
    outline: 0;
  }
}

@mixin reset-fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

@mixin reset-svg {
  display: block;
  margin: 0 !important;
}

@mixin reset-figure {
  margin: 0;

  * {
    user-select: none;
  }
}