@import '../variables/default.scss';
@import '../mixins/index.scss';
@import 'react-image-crop/dist/ReactCrop.css';

$Component: '.at-take-photo';
$ImageSize: 240px;

#{$Component} {
  &_list-item {
    .item-extra__info {
      display: block;
    }
  }
  &_cut-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #3b3f61;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 100000;
    align-items: center;
  }
  &_cut_text-container {
    display: flex;
    flex-direction: column;
    padding: 86px 0 62px 0;
    font-size: 32px;
    color: #ffffff;
    text-align: center;
  }
  &_cut_image-container {
  }
  &_image_cut {
    max-height: 800px !important;
  }
  &_cut_btn-container {
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .at-button--primary {
      background: linear-gradient(129deg, #5364ff 0%, #8754ff 100%);
      border: none;
      padding-left: 84px;
    }
    .at-button {
      padding-right: 84px;
      margin: 0 48px;
      .at-button__text {
        color: #ffffff;
      }
    }
  }
  &_content {
    text-align: center;
  }
  &_image_inline {
    border-radius: 50%;
    width: $ImageSize;
    height: $ImageSize;
    background-size: $ImageSize $ImageSize;
    margin: $spacing-v-lg auto;
    border: 6px solid $color-brand-light;
    .inline {
      height: $ImageSize;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      background-size: $ImageSize $ImageSize;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAACwCAMAAACYaRRsAAAAAXNSR0IArs4c6QAAARpQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJiw9WAAAAF50Uk5TAAECAwQFBwgJCgsMDQ4PEBITFBcaHB4hIiMkKCosMDEyNDY3ODk6Ozw9P0FCQ0RFRkdISUpLTE9QUVJUVVdZWlteX2BiY2VmZ2prbG1vcHFydHV2d3h5ent8fX5/gIL52HAAAAIISURBVBgZ7cHZQhIBGAXgM5Ph4BitYlpESguuRVQahoKZppGouIBw3v81unUBZZnlvzjfBxERERERERERERERERERERERERERERERERERERERERERERERERERERGR8FRo3iauytC8DK5y6zSu7uKaPI37iOu8C5rW9HDDN5r2FTelWjTsMoVbvtOwIm5LtWhW00cXRZpVQDfeKY069dBVjkbl0J1bo0k1Fz3M0qRZ9LRBgzbQm39Kc8583GGO5szhThUaU8Hdkkc05SiJe6TbNKSdxr0WaEge93OqNKOKfvjHNOLYR1+mOzShPY0+5WhCDn1bpQHLGMA6Y7eGQbhbjNmmg4E8/M1Y7YxhQN4BY7Q/joGl9hmb/UcYgrfDmOx4GMrYFmOxNYYhuWuMwZqL4S0zcisYSa7DSHXmMaKZBiPUmMHI/CojU51EAJz8JSNxueAgGFN1RuDfFAIzXmboygkEKdtgqBpZBCxZ6jA0nVISwZs9YEgOXiIUbu6EIWjMuwjL+OcmA3bxKYEw+YUmA9T84iNsfuGcATkv+IhC4t0hA3D4PoGoOK832xxJ8+crB5GazNc4rM52NoEYvFj5yyH8+TCJ2DzNVZocQP3Hm8eI2YOZ1V8X7MPxxtsnMMJ5nlks7Z6xh7Pd0mLmGeyZSGeXiuvl7b3aSat1UtvbLq8Xl7LpCQToPw4cbDJKggy4AAAAAElFTkSuQmCC);
      font-size: 24px;
      color: #ffffff;
      text-align: center;
      border: none;
      border-radius: 0;
      flex: 1;
      &_text {
        padding: 24px 0;
      }
    }
  }
  &_image {
    border-radius: 50%;
    width: $ImageSize;
    height: $ImageSize;
    margin: $spacing-v-lg auto;
    border: 6px solid $color-brand-light;
  }

  &_btn-container {
    .at-button {
      width: 140px;
    }

    #{$Component}_delete-btn {
      margin-right: $spacing-h-lg;
    }
  }
}