.cookies-bar-wrapper {
  background-color: $white;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;

  .cookies-bar {
    transition: opacity 1s ease-in-out, z-index 1s ease-in-out;
    padding: 10px 30px;
    display: flex;
    align-items: center;

    .cookies-text {
      font-size: $font-size-s;
      width: 60%;
    }

    .cookies-buttons-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 40%;
      margin-bottom: 10px;
    }

    .cookies-button {
      margin-right: 50px;
      margin-top: 15px;
    }
  }
}

.show-cookies-bar {
  opacity: 1;
}

.hide-cookies-bar {
  display: none;
}

@media screen and (max-width: 820px) {
  .cookies-bar-wrapper {
    .cookies-bar {
      flex-direction: column;

      .cookies-text {
        font-size: $font-size-xs;
        width: 100%;
      }

      .cookies-buttons-container {
        width: 100%;
        justify-content: flex-start;
        margin: 0;
      }

      .cookies-button {
        margin-right: 12px;
      }

      .button-submit {
        padding: 10px 18px;
      }
    }
  }
}
