3scale/porta

.button-to.action.new.service {
  margin-bottom: line-height-times(-2);
  font-weight: $font-weight-bold;
  float: right;
  padding-bottom: line-height-times(1/8);
  position: relative;
  z-index: 100;
}

@mixin overview-widget {

  .title {
    @extend h2;
    margin-bottom: 0;

    a {
      color: $font-color;
      text-decoration: underline;
      margin-bottom: line-height-times(1/2);
    }

    .button-to {
      margin-top: line-height-times(1/2);
    }
  }

  // BUTTONS
  .button-to {
    font-weight: $font-weight-bold;
  }

  ul.listing {
    clear: left;
    list-style: none;
    background-color: $white;
    padding: line-height-times(1);
    border: $border-width solid $border-color;
    position: relative;

    &[data-hint] {
      min-height: line-height-times(2);
    }

    li {
      border-bottom: $border-width solid $border-color;
      margin-left: 0;
      padding: line-height-times(1/2) 0;
      position: relative;

      .name {
        font-weight: $font-weight-bold;
      }

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      ul {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: line-height-times(3);
        -webkit-column-gap: line-height-times(3);
        column-gap: line-height-times(3);
        -moz-column-rule: $border-width solid $border-color;
        -webkit-column-rule: $border-width solid $border-color;
        column-rule: $border-width solid $border-color;
        list-style: none;
        padding: line-height-times(2 / 3) line-height-times(1 / 2);

        li {
          border-bottom: none;
          display: inline-block;
          padding-top: 0;
          width: 100%;
        }
      }
    }
  }
}

.overview-widget {
  @include overview-widget;

  .left > h2,
  .right > h2 {
    margin: line-height-times(1) 0 0;
  }
}

.service-widget {
  @extend .overview-widget;

  section {
    margin-top: line-height-times(1);

    .flex-row {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-top: line-height-times(2);
    }

    h2 {
      margin-top: line-height-times(2);
      position: relative;
      font-weight: $font-weight-normal;

      &:first-of-type {
        margin-top: 0;
      }

      & + .button-to {
        float: right;
      }

      a {
        text-decoration: underline;
        color: $link-hover-color;

        &:hover {
          color: $link-color
        }
      }
    }

    &[name='settings'] {
      @extend div.left;
    }

    &[name='activity'] {
      @extend div.right;
    }
  }

  .latest-alerts, .latest-apps, .service-settings, .service-plans, .application-plans, #mini-charts {
    @extend ul.listing;
    @include white-box-shadow;
    border: 0;
  }

  p {
    margin-top: 0;
    min-width: 0;
  }

  .outline-button.next {
    float: none;
    display: inline-block;
  }
}