@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.button";
@import "mixins/components.tooltip";

$c-onboarding-message-root-class: "c-onboarding-message";

.c-onboarding-message {
  @include c-tooltip;
  width: rem(200);
  display: inline-block;

  .c-button {
    @include c-button-theme("white-secondary");
    width: rem(34);
    min-width: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
  // TODO: Create a new c-button--micro variant?
  .c-button__icon {
    width: rem(15);
    height: rem(15);
  }
}
// Message is absolutely positioned by default (see the c-tooltip mixin)
.c-onboarding-message--static {
  position: relative;
}
.c-onboarding-message--open {
  @include c-tooltip--visible;
}
.c-onboarding-message__inner {
  @include c-tooltip-inner;
  @include c-tooltip-text;
}
.c-onboarding-message__link {
  &,
  &:visited {
    color: $color-grey-900;
    text-decoration: underline;
  }
  &:hover,
  &:focus,
  &:active {
    color: $color-grey-800;
    text-decoration: none;
  }
}
.c-onboarding-message__link--emphasized {
  @include font-gm-sans-bold;
  text-transform: uppercase;
}
.c-onboarding-message--dismissable {
  .c-onboarding-message__inner {
    padding-right: rem(34); // Button width
  }
}

// ------------------------------------
// Alignment and positioning
// ------------------------------------

@include c-tooltip-positions($c-onboarding-message-root-class);

// ------------------------------------
// Themes
// ------------------------------------

@include c-tooltip-themes($c-onboarding-message-root-class);

// White
.c-onboarding-message--white {
  .c-button {
    @include c-button-theme("white-primary");
  }
}

// Dark
.c-onboarding-message--dark,
.c-onboarding-message--blue-primary {
  .c-onboarding-message__link {
    &,
    &:visited {
      color: $color-white;
    }
    &:hover,
    &:focus,
    &:active {
      color: $color-grey-200;
    }
  }
}

// Grey
.c-onboarding-message--dark {
  .c-button {
    @include c-button-theme($color-grey-700);
  }
}

// Blue
.c-onboarding-message--blue-primary {
  .c-button {
    @include c-button-theme("blue-primary");
  }
}
