frontend/src/index.scss
$shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);

html {
  height: 100%;
  width: 100%;
  font-family: "Roboto", sans-serif;
}

@media (min-height: 950px) {
  html {
    zoom: 125%
  }
}

@media (max-height: 650px) {
  html {
    zoom: 75%
  }
}

body {
  --background: #EBEBEB;
  --primary: #0052B4;
  --secondary: #DD5A5A;
  --green: #63B85D;
  --text: #3E3E3E;

  color: var(--text);
  background: var(--background);
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.logo {
  height: 2.625rem;

  &:hover {
    opacity: .85;
  }
}

.content {
  flex: 1;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;

  &>* {
    margin: 0 auto;
    max-width: 30rem;
  }
}

.Votes {
  padding: 1rem;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  gap: 1.2rem;
  flex-direction: column;
  justify-content: space-between;


  .swipe-card {
    .swipe-card__container {
      border-radius: 1.5rem;
    }

    .swipe-card__ribbon-like,
    .swipe-card__ribbon-dislike {
      border-radius: 1rem;
    }

    .swipe-card__image-container {
      display: none;
    }

    .swipe-card__content {
      height: 100%;
      width: 100%;
      background: var(--primary);
      color: white;
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;

    .passer,
    .pour,
    .contre {
      border-radius: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: .6rem 0rem 0.1rem 0rem;
      text-transform: none;
      font-weight: bold;
      font-size: 1.125rem;
      bottom: 1rem;

      &:hover {
        background-color: white;
        opacity: .8;
      }

      &:hover,
      & {
        box-shadow: $shadow;
      }

      svg {
        height: 2.4rem;
        margin: .2rem;
      }
    }

    .passer {
      height: 2.5rem;
      max-width: 6.5rem;
      padding: 0 1rem;
    }
  }

  .Stack {
    flex: 1;
    height: 70%;
    width: 100%;
    align-items: center;
    justify-content: end;
  }

  .Card {
    height: 2px;
    padding: 1.2rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;

    h2 {
      font-size: 1.375rem;
      text-align: center;
      margin: 0;
      padding-bottom: 1rem;
      border-bottom: #ffffff30 1px solid;
    }

    ul {
      padding-left: 1rem;

      li {
        margin-bottom: 1rem;
      }
    }

    .more-info {
      height: 2.5rem;
      width: 100%;

      &:hover {
        opacity: .9;
      }
    }

    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;

      .actions {
        width: 100%;

        &>div {
          flex: auto;
        }
      }

      .meta {
        opacity: .7;
        text-align: center;
        font-size: 14px;
      }
    }
  }

  .progress {
    background-color: white;
    height: 1rem;
    border-radius: 1rem;
    width: 100%;
    position: relative;
    box-shadow: $shadow;

    .bar {
      background-color: var(--primary);
      position: absolute;
      transition: width 0.3s ease-in-out;
      border-radius: 1rem;
      display: block;
      height: 1rem;
      padding: 0;
      margin: 0;
    }
  }
}

.Welcome {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;

  .footer {
    text-align: center;
    color: #616161;

    a:visited {
      color: inherit;
    }
  }

  .Card {
    display: flex;
    flex-direction: column;
    color: white;

    h2 {
      text-align: center;
      font-size: 1.625rem;
    }

    .top,
    .bottom {
      flex: 1;
      border-radius: 1rem;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      svg {
        padding: 1rem;
      }
    }

    .top {
      background-color: var(--primary);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .bottom {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      background-color: var(--secondary);

      .welcome-start {
        color: white;
        height: 3.25rem;
        font-size: 1.25rem;
        width: 100%;

        &.euro {
          margin-top: 1rem;
        }

        &:hover {
          opacity: .9;
        }
      }
    }
  }
}

.hide {
  display: none;
}

.Resultats {
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 0;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin-bottom: 1rem;

  .header {
    margin: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      margin: 0;
    }

    .MuiButtonBase-root {
      height: 3rem;
    }

  }

  .MuiTabs-fixed {
    border-bottom: 1px solid #EAEAEA;
  }

  .list {
    padding: 1rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;

    .explanation {
      font-size: 0.875rem;
    }

    .result {
      display: flex;
      background-color: #C2C2C2;
      border-radius: 0.675rem;
      height: 3.375rem;
      box-shadow: $shadow;

      &:hover {
        opacity: .85;
      }

      img {
        object-fit: contain;
        background-color: white;
        width: 3.375rem;
        height: 3.375rem;
        border-top-left-radius: 0.675rem;
        border-bottom-left-radius: 0.675rem;
      }

      .progress {
        height: 3.375rem;
        border-radius: 0.675rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
        width: 100%;
        position: relative;


        @keyframes progress-bar {
          0% {
            width: 0%;
          }
        }


        .bar {
          background-color: var(--green);
          transition: width 0.3s ease-in-out;
          position: absolute;
          display: block;
          height: 3.375rem;
          padding: 0;
          margin: 0;
          animation: progress-bar 0.3s;
          animation-timing-function: ease-in-out;
        }

        .name {
          left: 1rem;
          color: white;
          position: absolute;
          display: flex;
          flex-direction: column;
          height: 3.375rem;
          justify-content: center;

          h4 {
            margin: 0;
            font-size: 1rem;
            white-space: pre;
          }

          h5 {
            margin: 0;
            font-weight: normal;
            font-size: 1rem;
            white-space: pre;
          }
        }

        .score {
          color: white;
          position: absolute;
          right: 1rem;
          line-height: 3.375rem;
          font-weight: lighter;
          font-size: 1.25rem;
        }
      }
    }

    .liste-result {
      background-color: #C2C2C2;
      border-radius: 0.675rem;

      box-shadow: $shadow;

      .top {
        display: flex;
        height: 3.375rem;
      }

      &:hover {
        opacity: .85;
      }

      img {
        object-fit: contain;
        background-color: white;
        width: 3.375rem;
        height: 3.375rem;
        border-top-left-radius: 0.675rem;
        border-bottom-left-radius: 0.675rem;
      }

      .progress {
        height: 3.375rem;
        border-radius: 0.675rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
        width: 100%;
        position: relative;


        @keyframes progress-bar {
          0% {
            width: 0%;
          }
        }


        .bar {
          background-color: var(--green);
          transition: width 0.3s ease-in-out;
          position: absolute;
          display: block;
          height: 3.375rem;
          padding: 0;
          margin: 0;
          animation: progress-bar 0.3s;
          animation-timing-function: ease-in-out;
        }

        .name {
          left: 1rem;
          color: white;
          position: absolute;
          display: flex;
          flex-direction: column;
          height: 3.375rem;
          justify-content: center;

          h4 {
            margin: 0;
            font-size: 1rem;
            white-space: pre;
          }

          h5 {
            margin: 0;
            font-weight: normal;
            font-size: 1rem;
            white-space: pre;
          }
        }

        .score {
          color: white;
          position: absolute;
          right: 1rem;
          line-height: 3.375rem;
          font-weight: lighter;
          font-size: 1.25rem;
        }
      }
    }

    .reset {
      color: white;
      height: 3rem;
    }
  }
}

.Navbar,
.BottomNav {
  box-shadow: $shadow;
  z-index: 5;

  .MuiBottomNavigationAction-root:hover {
    opacity: .8;
  }
}

.About {
  max-width: 35rem;

  .socials {
    display: flex;
    gap: 1rem;
  }

  .Card {
    margin: 1rem;
    background-color: white;
    gap: .75rem;
    border-radius: 1rem;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    h2,
    p {
      margin: 0;
    }

    h2 {
      margin-top: 2rem;
      font-size: 1.75rem;
    }
  }

  .equipe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;

    div {
      width: calc(49% - 1rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    h4,
    h5 {
      margin: 0;
      font-weight: normal;
    }
  }
}

.MuiBottomNavigationAction-root .MuiBottomNavigationAction-label {
  transition: margin 0.1s ease-in-out;

  &.Mui-selected {
    font-size: 0.75rem !important;
    margin-top: .15rem;
  }
}

.ResultsModal .content {
  background-color: var(--secondary);
  color: white;
  margin: 4rem auto;
  padding: 2rem 1rem;
  border-radius: 1rem;
  width: calc(100% - 2rem);
  max-width: 32rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: space-between;
  overflow: auto;

  h2 {
    font-size: 1.5rem;
  }

  svg {
    height: 10rem;
    width: 10rem
  }

  .actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    button {
      width: 100%;
      height: 3.25rem;
      font-size: 1.12500rem;

      &.MuiButton-containedLightRed:hover {
        opacity: .85;
      }
    }
  }
}

.NoVotesLeft {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ResultsParVote {
  margin-bottom: -1rem;

  .list {
    margin-bottom: 1rem;
  }

  .MuiSvgIcon-root {
    color: white;
  }

  .MuiAccordion-root {
    border-radius: 0 !important;
    background-color: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;

    ul {
      padding-left: 1rem;
      padding-top: 1rem;
      margin-top: 0;
      border-top: #ffffff30 1px solid;

      li {
        margin-bottom: 1rem;
      }
    }

    .more-info {
      height: 2.5rem;
      margin-top: 1rem;
      width: 100%;

      &:hover {
        opacity: .9;
      }
    }
  }

  .MuiToggleButtonGroup-root {
    background: white;
  }

  .mon-opinion {
    text-align: center;
  }


  .results {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 1rem 0rem;

    .result {
      display: flex;
      background-color: #C2C2C2;
      border-radius: 0.675rem;
      height: 3.375rem;

      .progress {
        height: 3.375rem;
        border-radius: 0.675rem;
        overflow: hidden;
        width: 100%;
        position: relative;


        @keyframes progress-bar {
          0% {
            width: 0%;
          }
        }

        .bar {
          transition: width 0.3s ease-in-out;
          position: absolute;
          display: block;
          height: 3.375rem;
          padding: 0;
          margin: 0;
          animation: progress-bar 0.3s;
          animation-timing-function: ease-in-out;

          &.pour {
            background-color: var(--green);
          }

          &.contre {
            background-color: var(--secondary);
          }
        }

        .name {
          left: 1rem;
          color: white;
          position: absolute;
          display: flex;
          flex-direction: column;
          height: 3.375rem;
          justify-content: center;

          h4 {
            margin: 0;
            font-size: 1rem;
            white-space: pre;
          }

          h5 {
            margin: 0;
            font-weight: normal;
            font-size: 1rem;
            white-space: pre;
          }
        }

        .score {
          color: white;
          position: absolute;
          text-align: right;
          right: 1rem;
          line-height: 0.8rem;
          font-size: 0.7rem;
          padding-top: 0.6rem;
        }
      }
    }
  }
}

.SharePopup {
  position: absolute;
  top: -2000px;
  left: 0;
  z-index: 2000;
  background-color: white;
  width: 25rem;
  padding-bottom: 1rem;
  transform: scale(2);

  .logo {
    width: 25rem;
  }

  h1 {
    font-size: 25px;
    text-align: center;
    margin-bottom: .5rem;
  }

  .list {
    padding: 1rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;

    .explanation {
      font-size: 0.875rem;
      text-align: center;
    }

    .result {
      display: flex;
      background-color: #C2C2C2;
      border-radius: 0.675rem;
      height: 3.375rem;

      &:hover {
        opacity: .85;
      }

      img {
        object-fit: contain;
        background-color: white;
        width: 3.375rem;
        height: 3.375rem;
        border-top-left-radius: 0.675rem;
        border-bottom-left-radius: 0.675rem;
      }

      .progress {
        height: 3.375rem;
        border-radius: 0.675rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
        width: 100%;
        position: relative;

        .bar {
          background-color: var(--green);
          transition: width 0.3s ease-in-out;
          position: absolute;
          display: block;
          height: 3.375rem;
          padding: 0;
          margin: 0;
        }

        .name {
          left: 1rem;
          color: white;
          position: absolute;
          display: flex;
          flex-direction: column;
          height: 3.375rem;
          justify-content: center;

          h4 {
            margin: 0;
            font-size: 1rem;
            white-space: pre;
          }

          h5 {
            margin: 0;
            font-weight: normal;
            font-size: 1rem;
            white-space: pre;
          }
        }

        .score {
          color: white;
          position: absolute;
          right: 1rem;
          line-height: 3.375rem;
          font-weight: lighter;
          font-size: 1.25rem;
        }
      }
    }

    .reset {
      color: white;
      height: 3rem;
    }
  }
}
