.Admin {
  background: var(--color-white);
}

.Admin-nav {
  background: var(--color-gray1);
  position: relative;

  .Widget {
    background: transparent;

    + .Widget {
      border-top: 1px solid var(--color-gray4);
    }

    .frame .Message {
      margin-top: 0;
    }
  }

  .Widget-title {
    margin-bottom: 0;

    + .Message {
      margin-top: 0;
    }
  }

  .Widget-controls + .Message {
    margin-top: 0;
  }

  .LinkTable {
    > * {
      color: var(--Link-color);
      position: relative;

      &::before {
        background: currentcolor;
        bottom: -1px;
        content: '';
        left: calc(0px - var(--gap-l));
        opacity: 0;
        position: absolute;
        top: -1px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--time-xs) var(--ease-out);
        width: var(--gap-m);
      }
    }

    > :hover,
    > :focus,
    > .selected {
      &::before {
        opacity: 1;
        transform: none;
      }
    }

    > :hover,
    > :focus {
      color: var(--Link-hoverColor);
    }

    > .selected {
      .Link.is-dominant;

      --Link-decoration: underline;
    }
  }
}

.Popup {
  --ContentEdit-barTop: calc(
    var(--Page-headerBottom) + var(--ContentEdit-workstreamHeight) +
      var(--gap-m) * 2 + var(--lineHeight-m)
  );

  .Admin {
    height: calc(100vh - var(--ContentEdit-barTop));
    margin: calc(0px - var(--gap-l));
    width: auto;
  }
}

.is-compactRails {
  .Admin-nav {
    .Icon.is-s;
    .Text.is-s;

    .Widget {
      padding-bottom: var(--gap-xl);
    }
  }
}

.Admin-main {
  > .Widget {
    > .Widget-title {
      background: var(--color-white);
      font-size: var(--fontSize-l);
      font-weight: normal;
      margin-bottom: 0;
      width: auto;
      z-index: 105;

      &::after {
        border-bottom: 1px solid var(--color-gray3);
        bottom: 0;
        content: '';
        left: 0;
        position: absolute;
        right: 0;
      }
    }

    > .Widget-controls {
      display: flex;
      height: calc(var(--gap-m) * 2 + var(--Text-height) - 1px);
      justify-content: flex-end;
      margin-bottom: 1px;
      margin-top: calc(0px - var(--gap-m) * 2 - var(--Text-height));
      position: sticky;
      z-index: 110;

      > .Widget-actions > .Widget-actionsToggle {
        --IconButton-name: 'more_horiz';
      }

      > .Widget-actions.is-open > .Widget-actionsToggle {
        background-color: var(--color-gray2);
        color: var(--Link-hoverColor);

        --IconButton-name: 'close';
      }
    }

    > .Message {
      margin-bottom: 0;
      margin-top: 0;
    }

    > form {
      padding-top: var(--Widget-padding);
    }

    > form .Widget-controls {
      height: calc(var(--gap-m) * 2 + var(--lineHeight-l) + 1px);
      z-index: 110;
    }
  }
}

@media (@mq-s) {
  .Admin {
    --Admin-navWidth: 240px;

    display: grid;
    grid-template:
      'nav main' 1fr ~'/'
      var(--Admin-navWidth) 1fr;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .Admin-nav {
    border-right: 1px solid var(--color-gray3);
    grid-area: nav;
    overflow: auto;
  }

  .Admin-main {
    grid-area: main;
    overflow: auto;
  }

  // https://en.wikipedia.org/wiki/Miller_columns
  .Admin-main.is-miller {
    --Admin-millerColumns: 1;

    display: flex;

    > .Widget {
      min-width: calc(
        (100vw - var(--gap-l) - var(--Admin-navWidth)) /
          var(--Admin-millerColumns)
      );
      overflow: auto;
      padding-top: 0;

      &:not(:first-child) {
        border-left: 1px solid var(--color-gray3);
      }

      > .Widget-title {
        margin-top: 0;
      }
    }
  }
}

@media (@mq-m) {
  .Admin-main.is-miller {
    --Admin-millerColumns: 2;
  }
}

@media (@mq-l) {
  .Admin {
    --Admin-navWidth: 320px;
  }
}

@media (@mq-xl) {
  .Admin-main.is-miller {
    --Admin-millerColumns: 3;
  }
}

.Admin.is-paginated {
  .Admin-leftNav-controls {
    left: calc(
      var(--Widget-padding) + var(--Icon-size) * 4 + var(--gap-xl) * 3 -
        var(--gap-xs)
    );
    position: fixed;
    top: var(--Page-headerHeight);
  }

  .Widget-controls {
    right: var(--gap-s);
  }

  > .Admin-nav > .Widget > .frame > .pagination {
    height: calc(var(--gap-m) * 2 + var(--Text-height));
    position: absolute;
    right: calc(var(--gap-s) * 4 + var(--Icon-size));
    top: 0;
    z-index: 11;
  }
}

.Page.is-broadcasting,
.Page.is-alertBroadcasting {
  .Admin.is-paginated {
    .Admin-leftNav-controls {
      top: calc(var(--Page-headerHeight) * 1.5);
    }
  }
}
