@import '../../../ui/colors.scss';
@import '../../../ui/typography.scss';

$header-min-height: 156px;
$header-max-height: 366px;
$surround-gap: 10px;

.rootWrapper {
  position: relative;
  margin: 0 (-$surround-gap);

  &:before {
    content: '';
    position: absolute;

    /* TODO: the magic 8px tries to negate default margin: 8px on body in order to prevent horizontal
     * scroll. eventually default body margin should be set to 0, then this `calc` can be removed */
    width: calc(100vw - 8px);

    top: 0;
    bottom: -1px;
    left: 50%;
    right: 50%;
    margin: 0 -50vw;

    background-image: linear-gradient(256deg, #f6f6f6, #fefefe),
                      linear-gradient(to bottom, rgba(240, 244, 247, 0.5), rgba(240, 244, 247, 0.5)),
                      linear-gradient(to bottom, #fff, #fff);
    z-index: -1;
    border-bottom: 1px solid #cbd3dc;
  }
}

.root {
  display: flex;
  flex-direction: column;
  min-height: $header-min-height;
  max-height: $header-max-height;
  overflow: hidden;
  margin-bottom: 30px;
}

.titleLayout {
  margin: 60px $surround-gap 40px;
}

.title {
  @include font();
  @include fontWeight(bold);
  font-size: 36px;
  line-height: 48px;
  color: $D10;
  gap: 24px;
}

.title,
.links {
  display: flex;
  align-items: flex-end;
}

.links {
  justify-content: flex-end;
}

.link {
  @include font();
  @include fontWeight(medium);
  font-size: 16px;
  color: $B10;
  line-height: 24px;

  display: flex;
  align-items: center;
  margin-left: 30px;

  a {
    text-decoration: none;
    color: $B10;
    margin-left: 8px;
  }
}

.component {
  padding: $surround-gap $surround-gap 60px;
}

.wip::before {
  background: linear-gradient(0deg, $Y60, $Y60), $D80;
}

.deprecated::before {
  background: linear-gradient(0deg, $R60, $R60), $D80;
}

.badge {
  align-self: center;
  margin-top: 10px;
}

.statusMessage {
  @include font();
  @include fontWeight(medium);
  font-size: 16px;
  color: $D20;
  line-height: 24px;
}