@use '../../assets/styles/mixins' as *;

.ff-download-client-wrapper {
  position: absolute;
  height: 181px;
  width: 368px;
  border: 1px solid var(--download-client-border-color);
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px
    var(--download-client-icon-container-box-shadow-color);

  .ff-download-client-header-wrapper {
    position: relative;
    @include center-content;
    justify-content: space-between;
    background-color: var(--download-client-header-bg-color);

    .ff-download-client-hollow-triangle {
      position: absolute;
      height: 8px;
      width: 8px;
      border: 1px solid var(--download-client-border-color);
      top: -6px;
      right: 64px;
      z-index: -1;
      border-radius: 2px;
      transform: rotate(45deg);
    }

    .ff-download-client-header-text {
      margin-left: 4px;
    }

    .ff-download-client-close-icon {
      cursor: pointer;
      margin-right: 10px;
    }
  }

  .ff-download-client-content-text {
    width: calc(100% - 16px);
    height: 132px;
    background-color: #fff;
    padding: 8px;

    .ff-download-client-description-text {
      margin-bottom: 8px
    }

  }

  .ff-download-client-os-wrapper {
    @include center-content;
    gap: 24px;

    .ff-os-version-wrapper {
      @include center-content;
      height: 64px;
      width: 64px;
      cursor: pointer;
      border-radius: 8px;
      border: 1px solid var(--download-client-icon-container-border-color);
      box-shadow: 0px 0px 10px 0px
        var(--download-client-icon-container-box-shadow-color);
    }
  }
}