.Guide {
  display: grid;
  grid-template:
    'title' calc(var(--gap-m) * 2 + var(--Text-height))
    'guide' auto ~'/'
    1fr;
  height: 100%;
  padding: 0;

  > .Guide-content {
    grid-area: guide;
    overflow: auto;
  }
}

.Guide-title {
  .Widget-title;

  grid-area: title;
  padding-right: calc(var(--gap-s) * 4 + var(--Icon-size) * 2 + var(--gap-l));
}

.Guide-controls {
  align-items: center;
  display: flex;
  height: calc(var(--gap-m) * 2 + var(--Text-height));
  position: absolute;
  right: calc(var(--gap-l) - var(--gap-s));
  top: 0;
}

.Guide-edit {
  .IconButton;

  --IconButton-name: 'edit';
}

.Guide-close {
  .IconButton;

  --IconButton-name: 'close';
}

.Guide-content {
  padding: 0 var(--gap-l) calc(var(--gap-xl) + var(--gap-l)) var(--gap-l);
}

.Guide-description,
.Guide-fieldDescription {
  b {
    font-weight: bold;
  }

  i {
    font-style: italic;
  }

  img {
    max-width: 100%;
  }

  ol,
  ul {
    list-style-type: revert;
    margin: var(--Text-height) 0 var(--Text-height) var(--Text-height);
  }

  u {
    text-decoration: underline;
  }

  .cms-textAlign-center {
    text-align: center;
  }

  .cms-textAlign-right {
    text-align: right;
  }
}

.Guide-description {
  padding-top: var(--gap-xl);
}

.Guide-tabCluster {
  .Text.is-s;

  background: var(--color-gray1);
  font-weight: bold;
  margin: var(--gap-xl) calc(0px - var(--gap-l)) 0 calc(0px - var(--gap-l));
  padding: var(--gap-s) var(--gap-l);
  position: sticky;
  top: 0;
  z-index: 1;

  &.is-widget {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .Guide-content > &:first-child {
    margin-top: 0;
  }
}

.Guide-image {
  display: block;
  margin: var(--Text-height) 0;

  > img {
    display: block;
  }
}

.Guide-field {
  padding-top: var(--gap-xl);
  position: relative;
  z-index: 0;

  > form {
    width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
  }

  &.is-focus::before {
    background: var(--color-dominant1);
    bottom: calc(0px - var(--gap-xl) / 2);
    content: '';
    left: calc(0px - var(--gap-l) / 2);
    position: absolute;
    right: calc(0px - var(--gap-l) / 2);
    top: calc(var(--gap-xl) / 2);
    z-index: -1;
  }
}

.Guide-fieldName {
  .Text.is-s;

  font-weight: bold;
  margin-bottom: var(--gap-s);
}

.Guide-embedded {
  padding-left: var(--gap-l);
  position: relative;

  &:not(:empty)::before {
    border-color: var(--Input-borderColor);
    border-style: solid;
    border-width: 0 0 1px 1px;
    bottom: calc(var(--gap-l) / 2);
    content: '';
    left: 0;
    position: absolute;
    top: calc(var(--gap-l) / 2);
    width: calc(var(--gap-l) / 2);
  }

  > .Guide-edit {
    position: absolute;
    right: 0;
    top: calc(0px - var(--gap-s) * 2 - var(--Icon-size));
  }

  > .Guide-content {
    padding: 0;
  }

  .Guide-tabCluster {
    display: none;
  }
}

// Production Guide edit page does not need "Delete Permanently" button
.Popup[name='edit-guide'] .ActionBar > button[name='action-delete'] {
  display: none;
}

.frame[name='guideField'] {
  padding: 0;

  .Guide-field {
    padding: var(--gap-l);
  }

  a.Guide-editField {
    position: absolute;
    right: calc(var(--gap-s) * 4 + var(--Icon-size));
    top: var(--gap-xs);
  }
}

div.Popup {
  &[data-subject-type='true'] a.CIG-guide {
    display: block;
  }

  a.CIG-guide {
    display: none;
  }
}

div[name='edit-guide'] {
  ~ div.Popup a.CIG-guide,
  a.CIG-guide {
    display: none;
  }
}
