// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.no-padding
  padding: 0 !important
  &-left
    padding-left: 0 !important
  &-right
    padding-right: 0 !important
  &-top
    padding-top: 0 !important
  &-bottom
    padding-bottom: 0 !important
  &-x
    @extend .no-padding-left
    @extend .no-padding-right
  &-y
    @extend .no-padding-top
    @extend .no-padding-bottom

.no-margin
  margin: 0 !important
  &-left
    margin-left: 0 !important
  &-right
    margin-right: 0 !important
  &-top
    margin-top: 0 !important
  &-bottom
    margin-bottom: 0 !important
  &-x
    @extend .no-margin-left
    @extend .no-margin-right
  &-y
    @extend .no-margin-top
    @extend .no-margin-bottom

.has-padding
  padding: $gap
  &-left
    padding-left: $gap !important
  &-right
    padding-right: $gap !important
  &-top
    padding-top: $gap !important
  &-bottom
    padding-bottom: $gap !important
  &-x
    @extend .has-padding-left
    @extend .has-padding-right
  &-y
    @extend .has-padding-top
    @extend .has-padding-bottom

.has-margin
  margin: $gap
  &-left
    margin-left: $gap !important
  &-right
    margin-right: $gap !important
  &-top
    margin-top: $gap !important
  &-bottom
    margin-bottom: $gap !important
  &-x
    @extend .has-margin-left
    @extend .has-margin-right
  &-y
    @extend .has-margin-top
    @extend .has-margin-bottom

.has-border
  border: .0625rem solid $border
  +dark-mode
    border-color: $border-dark
  &-top
    border-top: .0625rem solid $border
    +dark-mode
      border-color: $border-dark
  &-bottom
    border-bottom: .0625rem solid $border
    +dark-mode
      border-color: $border-dark
  &-left
    border-left: .0625rem solid $border
    +dark-mode
      border-color: $border-dark
  &-right
    border-right: .0625rem solid $border
    +dark-mode
      border-color: $border-dark
  &-x
    @extend .has-border-left
    @extend .has-border-right
  &-y
    @extend .has-border-top
    @extend .has-border-bottom

.no-border
  border: 0
  &-top
    border-top: 0
  &-bottom
    border-bottom: 0
  &-left
    border-left: 0
  &-right
    border-right: 0
  &-x
    @extend .no-border-left
    @extend .no-border-right
  &-y
    @extend .no-border-top
    @extend .no-border-bottom

.no-radius
  border-radius: 0 !important
  &-left
    border-top-left-radius: 0 !important
    border-bottom-left-radius: 0 !important
  &-right
    border-top-right-radius: 0 !important
    border-bottom-right-radius: 0 !important

.no-shadow
  box-shadow: none !important

.hidden,
[hidden]
  position: absolute
  overflow: hidden
  clip: rect(0 0 0 0)
  height: 1px
  width: 1px
  margin: -1px
  padding: 0
  border: 0
  display: none !important

.is-disabled,
input[disabled],
select[disabled],
textarea[disabled],
button[disabled]
  opacity: .5
  cursor: not-allowed !important

// use with floats and to disable margin collapsing
.clear-box
  clear: both
  &:before,
  &:after
    content: ""
    display: table

.pull-right
  float: right

.no-line-break
  white-space: nowrap
.has-line-break
  word-break: break-all
  word-wrap: break-word

.is-sticky
  position: sticky
  z-index: 100
  top: 0

.has-overflow
  overflow: auto
  &-x
    overflow-x: auto
    overflow-y: hidden
  &-y
    overflow-y: auto
    overflow-x: hidden

.no-overflow
  overflow: hidden
  &-x
    overflow-x: hidden
  &-y
    overflow-y: hidden
