// ============================================================================
// :: Add button
// ============================================================================
/**
* This component is used to add an account to your accounts. This component
* contains some text and an icon.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-add-new {
  position: relative;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 1.5rem;

  text-decoration: none !important; // overwrite salesforce framework app.css

  border-radius: $border-radius-base;
  color: $text-color-base !important; // overwrite salesforce framework app.css

  @include respond-at($breakpoint-tablet-default) {
    padding: 3rem 2rem;
  }

  &::before,
  &::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: $border-radius-base;

    transition: opacity 0.3s ease-in-out;
  }

  &::before {
    z-index: $z-index-roof;
    border: $border-width-base dashed $border-color-base;
  }

  &::after {
    z-index: $z-index-roof + 1;
    border: $border-width-base solid $primary-color-base;
    opacity: 0;
  }
}

button.m-add-new {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;

  border: none;
  background: transparent;
  text-align: left;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-add-new__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-right: 1.5rem;

  border-radius: $border-radius-round;
  background-color: $background-color-base;

  @include respond-at($breakpoint-tablet-default) {
    background-color: $background-color-light;
  }

  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;

  // style the icon
  &::before {
    font-size: $icon-size-base;
  }
}

.m-add-new__text {
  font-size: $font-size-1x-small;
  line-height: $line-height-1x-small;

  @include respond-at($breakpoint-tablet-default) {
    font-size: $font-size-base;
    line-height: $line-height-base;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-add-new {

  &:hover {

    &::before {
      opacity: 0;
    }

    &::after {
      opacity: 1;
    }

    .m-add-new__icon {
      background-color: $primary-color-base;
      color: $text-color-white;
    }
  }
}