@import "var";
@import "breakpoint-sass/stylesheets/breakpoint";
@import "mixins/typo";
@import "mixins/card";
@import "extend/misc";


:root {
  --arg-card-border-color : #{$arg-card-border-color};
  --arg-card-border-radius-size : #{$arg-card-border-radius-size};
  --arg-card-bg-color : #{$arg-card-bg-color};
  --arg-card-box-shadow : #{$arg-card-box-shadow};
  --arg-card-header-icon-bg-on-card : #{$arg-card-header-icon-bg-on-card};
  --arg-card-border-size: #{$arg-card-border-size};
  --arg-base-text-default-color: #000000;
  --arg-card-header-text-bot-color: #{$arg-card-metadata-color};
  --arg-card-metadata-color: #{$arg-card-metadata-color};
}

// Card first extend.
.card {
  @include argue-card;

  &__image {
    @include argue-card__image;
  }

  &__content-wrapper {
    @include argue-card__content-wrapper;
  }

  &__metadata {
    @include argue-card__metadata;
    @include arg-typo--subtitle2;
  }


  &__prevent_nesting .card {
    @include argue-card__prevent_nesting;
  }
  &__prevent_nesting_top .card {
    @include argue-card__prevent_nesting_top;
  }
}

.card-header {
  @include argue-card-header;

  &__icon {
    @include argue-card-header__icon;
    border-radius: 50%;
  }

  &__user-img {
    @include argue-card-header__icon;
    border-radius: 3px;
    img {
      display: block;
    }
  }

  &__text {
    @include argue-card-header__text;

    &__top {
      @include argue-card-header__text__top;
      @include arg-typo--h6;
      a {
        @extend %link-next;
      }
    }

    &__bot {
      @include argue-card-header__text__bot;
      @include arg-typo--subtitle2;
    }
  }

}

.card__content-item {
  @include argue-card__content-item;

  &__row {
    @include argue-card__content-item__row;
  }
}

.card__content-item__extend {
  @include card__content-item__extend;
}

.card__content-item__extend__toggle {
  @include card__content-item__extend__toggle;
}

.card-footer {
  @include argue-card-footer;
  &__metadata {
    @include argue-card__metadata;
  }
  &__action-buttons {
    @include argue-card-footer__action-buttons;

    .drop-menu,
    .argue-chip-set {
      margin: -.35rem .5rem -.35rem -.5rem;
    }
  }

  &__action-icons {
    @include argue-card-footer__action-icons;

    .drop-menu,
    .argue-chip-set {
      margin: -.35rem -.5rem -.35rem .5rem;
    }
  }
}

