vault-frontend/src/containers/profile/ProfileAccounts/styles.module.scss

@import "../../../styles/variables";

.wrap {
}

.list {
  border-radius: $radius;
  background: transparentize(white, 0.95);
}

.buttons {
  background: transparentize(black, 0.8);
  border-radius: $radius;
  padding: $gap * 0.5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.add {
  //background-color: $content_bg !important;
}

.loader {
  display: grid;
  grid-row-gap: $gap;
  grid-column-gap: $gap * 4;
  grid-template-columns: 1fr 32px;

  & > div {
    height: 48px;
    width: auto;
  }
}

.account {
  display: grid;
  grid-template-columns: 20px auto 20px;
  grid-column-gap: $gap * 1.5;
  align-items: center;
  border-bottom: 1px solid transparentize(white, 0.9);
  padding: $gap;

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

  &__photo {
    width: 28px;
    height: 28px;
    background: 50% 50% no-repeat;
    background-size: cover;
    border-radius: 2px;
    position: relative;
    background: $content_bg;
  }

  &__provider {
    position: absolute;
    right: -2px;
    bottom: -8px;
    background: $content_bg;
  }

  &__name {
    font: $font_16_semibold;
    padding-left: $gap * 0.5;
  }

  &__drop {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.25s;
    fill: $red;
    display: flex;
    align-items: center;

    &:hover {
      opacity: 1;
    }
  }
}

.info {
  padding: $gap $gap * 0.5;
  font: $font_14_regular;
}