/* FIRST ROW OF /gsuite/add-ons/_index.yaml — SERVICE (API) ICONS */

.service-container {
  margin: -24px -16px 24px;
}

.service-block {
  display: inline-block;
  height: 16px; /* Reduced height puts the tooltip where we want it. */
  margin: 20px 16px 0;
  width: 48px;
}

.service-block > img {
  position: relative;
  top: 0;
  transition: top .2s;
}

.service-block > img:hover,
.service-block:focus > img {
  top: -28px;
}

.devsite-landing-row-adjacent-text {
  margin-right: 24px;
  margin-top: 40px;
}

/* SECOND ROW OF /gsuite/add-ons/_index.yaml — QUICKSTARTS */

/*
 * All the positioning for the animated illustration is dependent on the
 * container. The padding-top is the same technique used for the .video-wrapper
 * class for responsive videos; it forces the container to maintain the desired
 * aspect ratio. The first part of the calc() is the same as the size of the
 * .devsite-landing-row-item-image element; the only new part of the calculation
 * is division by the desired aspect ratio at the end.
 */
.illustration-container {
  overflow: visible;
  padding-top: calc((100% - 20px) * 2 / 3 / 1.9); /* 1.9x image ratio. */
  position: relative;
}

@media screen and (max-width: 1000px) {
  .illustration-container {
    padding-top: calc((100% - 40px) / 2 / 1.9); /* 1.9x ratio. */
  }
}

@media screen and (max-width: 720px) {
  .illustration-container {
    padding-top: calc(100% / 1.9); /* 1.9x ratio. */
  }
}

.illustration {
  position: absolute;
  transition: bottom .2s;
}

.illustration > img {
  background: #999;
  box-shadow: 0 3px 15px #000;
  width: 100%;
}

.script-editor {
  height: 14%; /* Arbitrary height to position tooltip. */
  left: 50%;
  margin-left: -29%; /* Half the width, below. */
  top: 0;
  transition: top .4s;
  width: 58%; /* Half the width of the container. */
}

a:focus .script-editor,
.script-editor:hover {
  top: -5%;
}

/* Basic setup for Sheets, Docs, and Forms editors, overridden further below. */
.editor {
  bottom: calc(7% + 28px);
  height: calc((32% * 1.9 / (228 / 288)) - 28px); /* 1.9x ratio, width 228, height 288, 28px for tooltip. */
  width: 32%;
}

a:focus .editor,
.editor:hover {
  bottom: calc(14% + 32px); /* 32px instead of 28px so tooltip has more room. */
}

.sheets {
  left: 0;
}

.forms {
  right: 0;
}

.docs {
  left: 50%;
  margin-left: -16%; /* Half the width of the container, which is 32%. */
  bottom: 28px;
}

a:focus .docs,
.docs:hover {
  bottom: calc(7% + 32px);
}



/* SERVICE (API) ICONS ON /gsuite/add-ons/index.md */

.devsite-doc-page .service-container {
  margin: 0 -14px;
}

.devsite-doc-page .service-block {
  margin: 20px 8px 0;
}



/* ILLUSTRATIONS ON /gsuite/add-ons/index.md */

.add-ons-illustration {
  bottom: 0;
  display: inline-block; /* Overrides display:block in attempt-right @1000px. */
  height: 260px;
  position: relative;
}

.add-ons-illustration:focus,
.add-ons-illustration:hover {
  bottom: 32px;
}



/* TABLE ON /apps-script/triggers/index.md */

figure.icon {
  display: inline-block;
  text-align: center;
}

figure.icon img {
  width: 48px;
}