/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('./KFOlCnqEu92Fr1MmEU9fBBc4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.snackbar {
  --primary: #C849F4;
  --background: #353535;
  --text: #E3E3E3;
  --font: 'Roboto', sans-serif;
  --times: 1rem;
  --padd: 1rem;
}
$sm: 576px;

.snackbar {
  font-size: 1rem;
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  min-height: var(--times);
  padding: var(--padd);
  border-radius: 4px;
  @media screen and (max-width: $sm) {
    border-radius: 0;
    width: calc(100% - (2 * var(--padd)));
  }
  &.top, &.bottom {
    @media screen and (min-width: $sm) {
      transform: translateX(-50%);
      left: 50%;
      &-left {
        left: 1rem;
      }
      &-right {
        right: 1rem;
      }
    }
  }
  &[class*="bottom"] {
    bottom: 1rem;
  }
  &[class*="top"] {
    top: 1rem;
  }
  @media screen and (max-width: $sm) {
    left: 0;
    &[class*="bottom"] {
      bottom: 0;
    }
    &[class*="top"] {
      top: 0;
    }
  }

  .snackbar__text {
    flex: 1;
  }
  .snackbar__action {
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 0 1rem;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
  }
  .times {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--times);
    width: var(--times);
    margin-left: 1rem;
    transform: scale(1.25);
    position: relative;
    &:before {
      display: block;
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(.9);
      border-radius: 50%;
      transition: transform .1s ease-in;
    }
    &:hover {
      &:before {
        background-color: rgba(255, 255, 255, .2);
        transform: scale(2);
      }
    }
  }
}

.snack-enter-active, .snack-leave-active {
  transition: all .4s ease;
}
.snack-enter, .snack-leave-to {
  opacity: 0;
  @media screen and (min-width: $sm) {
    &.bottom {
      transform: translateY(100%) translateX(-50%);
    }
    &.top {
      transform: translateY(-100%) translateX(-50%);
    }
  }  
  &[class*="top"] {
    @media screen and (max-width: $sm) {
      transform: translateY(-100%);
    }
  }
  &[class*="bottom"] {
    @media screen and (max-width: $sm) {
      transform: translateY(100%);
    }
  }
  &[class*="-left"] {
    @media screen and (min-width: $sm) {
      transform: translateX(-50%);
    }
  }
  &[class*="-right"] {
    @media screen and (min-width: $sm) {
      transform: translateX(50%);
    }
  }
}