/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';

@include nb-install-component() {
  $primary: nb-theme(color-primary);
  $white: nb-theme(color-white);
  $separator-bg: #dde1eb;

  display: block;
  position: relative;

  .close-icon {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: calc(100% + 2.25rem);
  }

  nb-card {
    width: 400px;
    max-height: 481px;
    font-family: nb-theme(font-main), sans-serif;
    background: $white;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 6px 40px 0 rgba(0, 35, 106, 0.15);;
  }

  nb-card-body {
    padding: 5.625rem 0 0;
    border-radius: 0.75rem;
  }

  .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: nb-theme(color-fg);
  }

  .icon-name {
    font-size: nb-theme(font-size-xlg);
    margin-top: 3.75rem;
  }

  .download-controls {
    display: flex;
    justify-content: center;
    background-color: nb-theme(color-gray-bg);
    border-top: 1px solid $separator-bg;
    margin-top: 4.5rem;
    padding: 2rem 0 1.875rem;

    > div {
      margin-left: 1.5rem;
      cursor: pointer;

      &:first-child {
        margin-left: 0;
      }

      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 6.5rem;
        height: 6.5rem;
        padding-top: 1.25rem;
        background-color: $white;
        border-radius: 0.75rem;
        text-decoration: none;

        &:hover {
          background-color: rgba(51, 102, 255, 0.1);
        }

        &.active, &:active {
          background-color: rgba(40, 77, 224, 0.2);
        }
      }
    }
  }

  .download-control {
    width: 2.5rem;
    height: 2.5rem;
  }

  .svg {
    background: url('../../../../../assets/img/shape.svg') no-repeat;
    background-position: 50% 50%;
  }

  .png {
    background: url('../../../../../assets/img/png.svg') no-repeat;
    background-position: 50% 50%;
  }

  .name {
    font-size: nb-theme(font-size-sm);
    font-weight: nb-theme(font-weight-ultra-bold);
    color: nb-theme(color-primary);
    text-align: center;
    margin-top: 0.375rem;
  }

  .select-size-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      color: nb-theme(color-fg);
    }
  }

  ul {
    padding: 0;
  }

  .available-sizes {
    display: inline-flex;
    margin-top: 1.5rem;
    border: 1px solid $primary;
    border-radius: nb-theme(radius);

    li {
      list-style: none;
      color: $primary;
      padding: 1rem 1.25rem;
      border-left: 1px solid $primary;
      font-weight: nb-theme(font-weight-bold);
      cursor: pointer;

      &:first-child {
        border-left: none;
      }

      &:hover, &.active, &:active {
        background-color: $primary;
        color: $white;
      }
    }
  }
}
