@import '../../../../globals/variables';
@import '../../../../globals/mixins';

.close-download-button {
  background: $ads-text-main;
  border: none;
  height: 3.5rem;
  padding: 1.3rem;
  transition: background-color 0.3s ease;
  width: 3rem;

  @include respond-to('small') {
    height: 3.5rem;
    width: 3rem;
  }

  @include respond-to('medium') {
    height: 4.5rem;
    width: 4rem;
  }

  @include respond-to('large') {
    height: 5.5rem;
    width: 5rem;
  }

  @include respond-to('extra-large') {
    height: 6rem;
    width: 5.2rem;
  }

  &:hover {
    background: linear-gradient(to bottom right, $ads-text-main, $ads-text-main-hover);
  }

  .button-icon {
    display: flex;
    height: 100%;
    width: 100%;

    svg {
      height: 100%;
      width: 100%;
    }

    &--primary {
      path {
        fill: $ads-text-main;
      }
    }

    &--secondary {
      path {
        fill: $ads-text-main;
      }
    }
  }

  &:hover .button-icon path {
    @include respond-to('small') {
      fill: $ads-text-main;
    }

    @include respond-to('medium') {
      fill: $ads-text-main;
    }
  }
}
