@import "../../styles/colors.scss";
@import "../../styles/fonts.scss";

.primary_standart_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $yellow;
  padding: 2.5px 1px 2.5px 2.5px;
  border-radius: 20px;
  width: fit-content;
  height: 30px;
  box-sizing: border-box;
  border-color: $blackSecondary;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 24.5px;
    width: 24.5px;
    flex-shrink: 0;
    background-color: $blackSecondary;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
    }
  }
  .label {
    margin: 0;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $blackSecondary;
  }
}

.secondary_standart_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $blackSecondary;
  padding: 2.5px 1px 2.5px 2.5px;
  border-radius: 20px;
  width: fit-content;
  height: 30px;
  box-sizing: border-box;
  border-color: $yellow;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 24.5px;
    width: 24.5px;
    flex-shrink: 0;
    background-color: $yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $yellow;
  }
}

.tertiary_standart_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $orangePrimary;
  padding: 2.5px 1px 2.5px 2.5px;
  border-radius: 20px;
  width: fit-content;
  height: 30px;
  box-sizing: border-box;
  .iconWrapper {
    border-radius: 50%;
    height: 24.5px;
    width: 24.5px;
    flex-shrink: 0;
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $white;
  }
}

.quaternary_standart_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $white;
  padding: 2.5px 1px 2.5px 2.5px;
  border-radius: 20px;
  width: fit-content;
  height: 30px;
  box-sizing: border-box;
  border-color: $greyTertiary;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 24.5px;
    width: 24.5px;
    flex-shrink: 0;
    background-color: $orangePrimary;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $blackSecondary;
  }
}

.primary_min_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $yellow;
  padding: 1.5px 0.4px 1.5px 1.5px;
  border-radius: 14px;
  width: fit-content;
  height: 20px;
  box-sizing: border-box;
  border-color: $blackSecondary;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 16.7px;
    width: 16.7px;
    flex-shrink: 0;
    background-color: $blackSecondary;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
      height: 70%;
      width: 70%;
    }
  }
  .label {
    margin: 0;
    font-family: Poppins;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 7px;
    color: $blackSecondary;
  }
}

.secondary_min_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $blackSecondary;
  padding: 1.5px 0.4px 1.5px 1.5px;
  border-radius: 14px;
  width: fit-content;
  height: 20px;
  box-sizing: border-box;
  border-color: $yellow;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 16.7px;
    width: 16.7px;
    flex-shrink: 0;
    background-color: $yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
      height: 70%;
      width: 70%;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $yellow;
  }
}

.tertiary_min_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $orangePrimary;
  padding: 1.5px 0.4px 1.5px 1.5px;
  border-radius: 14px;
  width: fit-content;
  height: 20px;
  box-sizing: border-box;
  .iconWrapper {
    border-radius: 50%;
    height: 16.7px;
    width: 16.7px;
    flex-shrink: 0;
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
      height: 70%;
      width: 70%;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $white;
  }
}

.quaternary_min_label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: $white;
  padding: 1.5px 0.4px 1.5px 1.5px;
  border-radius: 14px;
  width: fit-content;
  height: 20px;
  box-sizing: border-box;
  border-color: $greyTertiary;
  border-style: solid;
  border-width: 0.5px;
  .iconWrapper {
    border-radius: 50%;
    height: 16.7px;
    width: 16.7px;
    flex-shrink: 0;
    background-color: $orangePrimary;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon {
      align-self: center;
      position: absolute;
      height: 70%;
      width: 70%;
    }
  }
  .label {
    font-family: Poppins;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    padding: 0 10px;
    color: $blackSecondary;
  }
}