3scale/porta

#user-permissions-form {
  overflow: hidden;
}

.edit-user-form.formtastic.user .actions {
  margin-top: 0;
}

form.formtastic fieldset > ol > li.radio fieldset,
form.formtastic fieldset > ol > li fieldset {

  .FeatureAccessList {

    &--noServicePermissionsGranted {
      .FeatureAccessList-item.FeatureAccessList-item--monitoring::after,
      .FeatureAccessList-item.FeatureAccessList-item--partners::after,
      .FeatureAccessList-item.FeatureAccessList-item--plans::after,
      .FeatureAccessList-item--services {
        display: none;
      }
    }

    &-item {
      position: relative;

      &--labelDescription {

        li {
          padding-left: line-height-times(1);

          &::before {
            content: '- ';
          }
        }

      }

      &--partners {
        margin-top: line-height-times(2);
      }

      &.is-checked.FeatureAccessList-item--monitoring::after,
      &.is-checked.FeatureAccessList-item--partners::after,
      &.is-checked.FeatureAccessList-item--plans::after {
        border-top-style: solid;
        border-right-style: solid;
      }

      &--monitoring::after,
      &--partners::after,
      &--plans::after {
        background-color: transparent;
        border-right: $border-width dotted $border-color;
        border-top: $border-width dotted $border-color;
        border-top-right-radius: $border-radius;
        content: '';
        display: block;
        height: line-height-times(200);
        position: absolute;
        z-index: 0;
      }

      &--partners:after {
        margin-left: 43%;
        top: line-height-times(275 / 100);
        width: 50%;
      }

      &--monitoring:after {
        margin-left: 27%;
        top: line-height-times(275 / 100);
        width: 50%;
      }

      &--plans:after {
        margin-left: 34%;
        top: line-height-times(475 / 100);
        width: 21%;
      }

      &--services {
        margin-top: line-height-times(2);
      }
    }
  }

  .ServiceAccessList {
    margin-top: line-height-times(1);
    position: relative;
    z-index: 1000;

    &--noServicePermissionsGranted, &--services {
      display: none;
    }

    &-labelText {
      display: inline-block;
      width: 24%;
      @include ellipsis;
      overflow: hidden;
      line-height: 1;
    }

    &-item {
      position: relative;

      &:last-of-type .ServiceAccessList-label{
        margin-bottom: 0;
      }
    }

    &-label {
      width: auto;
      display: block;
      margin-bottom: line-height-times(1);
      padding: line-height-times(1/2) 2% line-height-times(1/2) 2%;
      border: $border-width dotted $border-color;
      margin-left: -2%;
      border-radius: $border-radius;
      background-color: $background-color-base;

      &.is-checked {
        border: $border-width solid $border-color;
        background-color: rgba($background-color-base, 0.8)
      }
    }

  }
}

.is-hidden {
  display: none !important;
}

.is-unavailable {
   text-decoration: line-through !important;
   color: $light-color;
}


form.formtastic fieldset > ol > li.radio.u-servicePermissionsDisabled fieldset,
form.formtastic fieldset > ol > li.u-servicePermissionsDisabled fieldset {

  .ServiceAccessList {
    display: none;
  }

  .FeatureAccessList {
    &-item {
      &--monitoring::after,
      &--partners::after {
        display: none;
      }
    }
  }
}