@import '~styles/config';

.connectionItem {
  @include reset-button;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: $gutter;
  height: 120px;
  cursor: pointer;

  text-align: left;

  box-shadow: inset 0 0 0 0 transparent;

  &__inactive {
    opacity: 0.5;
  }

  &:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $color-grey100;
  }

  &.selected,
  &:hover,
  &:focus {
    @include box-shadow-selected();
  }

  .icon {
    display: flex;
    justify-content: center;
    width: 36px;

    &__svg {
      @include colorify('fill');
      height: 36px;
    }
  }

  .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 30px;

    &__title {
      @include responsive-font(18, 20);
      @include colorify();
      font-family: $font-heading;
      font-weight: 600;

      &.add {
        @include responsive-font(14, 16);
      }
    }

    &__content {
      color: $color-grey700;
    }

    &__contentInactive {
      color: $color-dark;
    }
  }

  .arrow,
  .plus {
    display: flex;
    width: 40px;
    height: 40px;
  }

  .arrow {
    align-items: flex-end;
    justify-content: flex-end;
    transform: rotate(270deg);
  }

  .plus {
    justify-content: flex-end;

    &__svg {
      margin: -4px -4px 0 0;
      height: 24px;
      width: 24px;
    }
  }
}