.admin {
  .app-container {
    & > aside {
      .user {
        padding: $grid-gutter-width 20px;
        border-bottom: solid 1px rgba(#fff, 0.12);

        @media (min-width: $screen-sm-min) {
          padding: $grid-gutter-width $padding-base-horizontal;
          text-align: center;
        }

        .avatar {
          display: inline-block;
          width: 48px;
          height: 48px;
          float: left;
          background-color: $primary-colour;
          background-position: center;
          background-size: 100% auto;
          margin-right: $grid-gutter-width/2;
          border-radius: 50%;
          border: solid 1px #fff;

          @media (min-width: $screen-sm-min) {
            width: 60%;
            height: auto;
            padding-top: 60%;
            margin: 0;
            float: none;
            border-width: 2px;
          }
        }

        .name {
          margin-bottom: 0;
        }
      }
    }

    .dataset-list {
      margin: $padding-base-vertical 0 0 0;

      & > table {
        display: block;

        th {
          span {
            @include text-hide;
          }
        }

        tbody {
          display: block;

          tr {
            display: block;
            clear: both;
            padding: 20px $grid-gutter-width 15px $grid-gutter-width;
            position: relative;

            &:nth-child(odd) {
              background-color: #fff;

              td > ul::before {
                content: '';
                background-color: #fff;
                width: 100vw;
                position: absolute;
                right: -$grid-gutter-width;
                bottom: -20px;
                top: 0;
              }
            }

            td {
              padding: $padding-small-vertical $padding-base-horizontal/2 $padding-small-vertical 0;
              display: inline-block;

              span {
                position: relative;
                z-index: 2;
              }

              &.title {
                font-size: 18px;
                font-weight: 500;
              }

              &.status {
                .label {
                  position: relative;
                  top: -2px;
                }
              }

              &.actions {
                padding-right: 0;
                display: block;

                @media (min-width: $screen-md-min) {
                  float: right;
                  text-align: right;
                }

                & > ul {
                  padding: 0;
                  margin: 0;
                  position: relative;

                  @media (min-width: $screen-md-min) {
                    margin-top: -5px;
                  }

                  & > li {
                    display: inline-block;

                    @media (min-width: $screen-md-min) {
                      margin-left: $padding-small-horizontal;
                    }

                    a {
                      font-size: 0.9em;
                    }

                    & > a {
                      position: relative;

                      &::after {
                        content: ' |';
                      }

                      svg {
                        display: none;
                      }

                      @media (min-width: $screen-md-min) {
                        &::after {
                          content: '';
                        }

                        @include btn;
                        @include button-variant(#fff, $grey, $grey);

                        padding: 0.5em $padding-base-horizontal 0.25em $padding-base-horizontal;
                        font-size: 0.8em;
                        background-repeat: no-repeat;
                        background-size: auto 18px;
                        background-position: center center;
                        min-width: 32px;

                        svg {
                          display: inline-block;
                          width: 20px;
                          height: 20px;
                          fill: currentColor;
                          position: absolute;
                          left: 5px;
                          top: 50%;
                          margin-top: -10px;

                          & + span {
                            @include text-hide;
                          }
                        }
                      }
                    }

                    &.publish {
                      & > a {
                        @media (min-width: $screen-md-min) {
                          @include button-variant($primary-colour, transparent, $primary-colour);
                        }
                      }
                    }

                    &.make-private {
                      & > a {
                        @media (min-width: $screen-md-min) {
                          @include button-variant(lighten($grey, 30%), transparent, lighten($grey, 50%));
                        }
                      }
                    }

                    &.edit {
                      & > a {
                        @media (min-width: $screen-md-min) {
                          @include button-variant(#fff, $green, $green);
                        }
                      }

                      .tooltip-inner {
                        background-color: darken($green, 10%);
                      }

                      .tooltip-arrow {
                        border-top-color: darken($green, 10%);
                      }
                    }

                    &.view {
                      & > a {
                        @media (min-width: $screen-md-min) {
                          @include button-variant(#fff, $blue, $blue);
                        }
                      }

                      .tooltip-inner {
                        background-color: darken($blue, 10%);
                      }

                      .tooltip-arrow {
                        border-top-color: darken($blue, 10%);
                      }
                    }

                    ul {
                      margin: 0;
                      padding: 0;

                      li {
                        display: inline-block;
                      }

                      @media (min-width: $screen-sm-min) {
                        @include context-menu (left);

                        margin-top: -6px;

                        li {
                          display: block;
                          white-space: nowrap;
                        }
                      }
                    }

                    &.download {
                      position: relative;
                      display: none;

                      @media (min-width: $screen-sm-min) {
                        display: inline-block;
                      }
                    }

                    &.more {
                      position: relative;

                      & > a {
                        @include button-variant($grey, transparent, transparent);

                        display: none;

                        @media (min-width: $screen-sm-min) {
                          display: inline-block;
                        }

                        @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
                          color: $primary-colour;
                        }

                        &::after {
                          content: '';
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}