$rounded: (
   'pill': 9999px,
   'circle': 50%,
   'sm': 5px,
   null: 12px,
   'xl': 24px,
   '0': 0
);

@each $name, $border in $rounded {
   @if $name == null {
      .rounded{
         border-radius: $border !important;
      }
   } @else {
      .rounded__#{$name} {
         border-radius: $border !important;
      }
   }
}

%flex{
    display: flex;
    align-items: center;
}

.d-flex-center{
    @extend %flex;
    justify-content: center;
}

.d-flex-between{
    @extend %flex;
    justify-content: space-between;
}

.d-flex-left{
    @extend %flex;
    justify-content: flex-start;
}

.d-flex-right{
    @extend %flex;
    justify-content: flex-end;
}

$displays: (
    f: flex,
    i: inline-block,
    b: block,
);

@each $name, $display in $displays {
    .show-mobile__#{$name}{
        @include media($mobile) {
            display: $display;
        }
    
        @include media($desktop) {
            display: none;
        }
    }

    .show-desktop__#{$name} {
        @include media($mobile) {
            display: none;
        }
    
        @include media($desktop) {
            display: $display;
        }
    }
}