@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .dashed-border::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 2px dashed rgba(255, 148, 36, 0.5); /* Толщина и цвет пунктирной границы */
      border-radius: 8px;
      pointer-events: none;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .header-icon {
        svg path {
            fill: #131313;
        }
        &-active {
            svg path {
                fill: #fff;
            }
        }
    }
}


body {

}

@layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

@layer utilities {
    /* Custom global class selectors  */
    .scroll-bar-hidden::-webkit-scrollbar {
        display: none;
    }
    .w-goods-card {
        width: calc((100% / 3) - (40px / 3));
    }
    /* Typography */
    .title {
        font-family: Inter, sans-serif;
        font-weight: 500;
        &-1 {
            @extend .title;
            font-size: 12px;
            line-height: 14px;
        }
        &-2 {
            @extend .title;
            font-size: 14px;
            line-height: 16px;
        }
        &-3 {
            @extend .title;
            font-size: 29px;
            font-weight: 600;
            line-height: 29px;
        }
        &-4 {
            @extend .title;
            font-size: 16px;
            font-weight: 800;
            line-height: 12px;
        }
    }
    .subtitle {
        font-family: Inter, sans-serif;
        font-weight: 400;
        &-1 {
            @extend .subtitle;
            font-size: 12px;
            line-height: 16px;
        }
        &-2 {
            @extend .subtitle;
            font-size: 10px;
            line-height: 12px;
        }
        &-3 {
            @extend .subtitle;
            font-size: 14px;
            //line-height: 12px;
        }
    }
}