ciphermask/ui/components/app/modals/edit-approval-permission/index.scss

.edit-approval-permission {
  width: 100%;

  &__header,
  &__account-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #d2d8dd;
  }

  &__header {
    padding: 24px;

    &__close {
      position: absolute;
      right: 24px;
      background-image: url("/images/close-gray.svg");
      width: 0.75rem;
      height: 0.75rem;
      cursor: pointer;
    }
  }

  &__title {
    @include H4;

    font-weight: bold;
  }

  &__account-info {
    justify-content: space-between;
    padding: 8px 24px;

    &__account,
    &__balance {
      @include H6;

      font-weight: normal;
      color: #24292e;
    }

    &__account {
      display: flex;
      align-items: center;
    }

    &__name {
      margin-right: 8px;
      min-width: 64px;
    }

    &__balance {
      color: #6a737d;
      margin-left: 8px;
    }
  }

  &__edit-section {
    padding: 24px;

    &__title {
      @include H6;

      font-weight: bold;
      color: #24292e;
    }

    &__description {
      @include H7;

      font-weight: normal;
      color: #6a737d;
      margin-top: 8px;
    }

    &__option {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;
    }

    &__radio-button {
      width: 18px;
    }

    &__option-text {
      display: flex;
      flex-direction: column;
    }

    &__option-label,
    &__option-label--selected {
      @include H6;

      font-weight: normal;
      color: #474b4d;
    }

    &__option-label--selected {
      color: var(--primary-blue);
    }

    &__option-description {
      @include H7;

      color: #6a737d;
      margin-top: 8px;
      margin-bottom: 6px;
    }

    &__option-value {
      @include H4;

      color: #24292e;
    }

    &__radio-button {
      position: relative;
      width: 18px;
      height: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 4px;
    }

    &__radio-button-outline,
    &__radio-button-outline--selected {
      width: 18px;
      height: 18px;
      background: #dadcdd;
      border-radius: 9px;
      position: absolute;
    }

    &__radio-button-outline--selected {
      background: var(--primary-blue);
    }

    &__radio-button-fill {
      width: 14px;
      height: 14px;
      background: white;
      border-radius: 7px;
      position: absolute;
    }

    &__radio-button-dot {
      width: 8px;
      height: 8px;
      background: var(--primary-blue);
      border-radius: 4px;
      position: absolute;
    }
  }

  &__name-and-balance-container {
    display: flex;
    flex: 0 0 100%;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 8px;
  }
}

.edit-approval-permission-modal-content {
  padding: 0;
}

.edit-approval-permission-modal-container {
  max-height: 550px;
  width: 100%;
}