@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/mixins';
@import 'ctl_base_ui/icons';
@import 'extensions';

#registries_flow {
  h1.breadcrumbs {
    margin-bottom: 0;
  }
}

.registries {
  > ul {
    margin-bottom: 25px;

    li {
      font-size: 14px;
      padding: 25px 0;
      border-bottom: $light_grey 1px solid;
      overflow: auto;

      .name,
      .endpoint,
      .edit-registry {
        float: left;
      }

      span.name {
        width: 340px;
        font-weight: bold;
        font-size: 20px;
        text-decoration: none;
      }

      .endpoint {
        font-style: italic;
        margin-top: 2px;
        width: 355px;

        strong {
          font-style: normal;
        }
      }

      .actions {
        position: relative;
        width: 165px;
        float: right;

        .delete-action {
          @include hide-text;
          @extend .icon-x-large;
          @include icon-grey;
          padding: 0;
          float: right;

          &:after {
            display: none;
          }

          &:hover {
            @include icon-red;
          }
        }
        .confirm-delete {
          font-size: 14px;
        }
      }
    }
  }

  form.create-registry {
    @extend .expandable;

    .notice-danger {
      margin: 0 0 10px 0;
    }
    #registry_name,
    #registry_endpoint_url,
    .field_with_errors {
      width: 330px;
    }
    input[type="submit"] {
      font-family: Helvetica, Arial, sans-serif;
    }
    a.cancel {
      margin-left: 10px;
    }
  }

  .button-add-positive {
    @include transition('opacity 0.6s');
  }



  &.expanded {
    form.create-registry {
      max-height: 50px;

    }

    .button-add-positive {
      @include transition('opacity 0.6s');
      opacity: 0;
    }
  }
}
