@import '../../../../../scss/modules/buttons';

.refresh {
  @extend %settingsButton;

  background-color: map-get($button-colours, 'confirm');
  border: 2px solid map-get($button-colours, 'confirm');

  &:hover {
    border: 2px solid map-get($button-colours, 'confirm');
    color: map-get($button-colours, 'confirm');
  }
}

.reset {
  @extend %settingsButton;

  background-color: map-get($button-colours, 'reset');
  border: 2px solid map-get($button-colours, 'reset');

  &:hover {
    border: 2px solid map-get($button-colours, 'reset');
    color: map-get($button-colours, 'reset');
  }
}

.add,
.close {
  @extend %settingsButton;

  background-color: map-get($button-colours, 'other');
  border: 2px solid map-get($button-colours, 'other');

  &:hover {
    color: map-get($button-colours, 'other');
    border: 2px solid map-get($button-colours, 'other');
  }
}

.close {
  padding: 10px 50px 10px 50px;
}

.export,
.uploadbg,
.import {
  width: 440px;
  height: 60px;
  background-color: var(--sidebar);
  border: none;
  outline: none;
  color: var(--modal-text);
  border-radius: 12px;
  margin-right: 25px;
  width: 220px;
  cursor: pointer;
  border-radius: 24px;
  border: 3px solid var(--tab-active);
  font-size: 1rem;

  &:hover {
    background-color: var(--tab-active);
  }

  &:disabled {
    cursor: not-allowed;
    background: none;
    border: 1px solid var(--tab-active);

    &:hover {
      background: none;
      border: 1px solid var(--tab-active);
    }
  }
}

.export,
.import {
  margin-left: 20px;
}

.round-small {
  height: 10px !important;
  width: 10px !important;
}

.data-buttons-row {
  width: 350px;
  display: flex;
  flex-direction: row;

  button {
    background: var(--sidebar);
    text-align: center;
    border-radius: 20px;
    padding: 20px;
    border: 3px solid var(--tab-active);
    height: 40px;
    font-size: 1rem;
    margin: 0 10px 10px 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    color: var(--modal-text);

    &:hover {
      background: var(--tab-active);
      cursor: pointer;
    }
  }
}

.customvideoicon {
  position: absolute;
  margin-bottom: 45px;
  font-size: 3em !important;
}