@use '../../styles/design-system.scss' as *;

.downloadBoxContainer {

    color: whitesmoke;
    margin: auto;

    .downloadBox {
      @include u-bg('blue-80v');
      border-radius: 6px 6px;

      .downloadBoxTextBox {
        padding: 25px 25px;
        display: flex;
        flex-direction: column;
        
        .downloadBoxTitle {
          @include typeset('sans', 'xs', 3);
          @include u-text('semibold');
          @include u-margin-bottom(2);
        }
        
        .downloadBoxText {
          @include typeset('sans', 'xs', 3);
          @include u-margin-bottom(4);
          
          span {
            font-style: italic;
          }
        }

        .downloadBoxButtonContainer {
          margin-top: 20px 0 0 0;
          align-self: center;

          a {
            text-decoration: none;
          }

          img {
            // This should be a global css-filter value as it's generated
            // from the primary color.
            filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
          }
        }

        .downloadBoxButton{
          @include u-bg('white');
          @include u-color('blue-80v');
          display: flex;

          .downloadPacketText {
            padding-top: 4px;
            padding-left: 5px;
          }
        }

      }
    }
  }